jQuery の非同期処理を勉強中でして、納得できないところについて教えて頂けませんでしょうか

Question

先日からjQueryの非同期処理について少し勉強しはじめた者です。
調べていくうちにいろいろなパターンがあり混乱してしまい、少し整理できればと思いご質問させて頂きます。
どうぞお手柔らかに宜しくお願い致します。

以下すべてのコードはこちらに書いてあります。
https://jsfiddle.net/xdfvzo0n/

###基本的な関数
まず基本的な関数hoo()をご用意しました。この呼び出し方についてのご質問になります。

function hoo(){
  var deferred = $.Deferred();
  setTimeout(function(){
    console.log('2');
    deferred.resolve();
  },1000);
  return deferred.promise();
}

###ご質問➀
下記の【A】【B】はどちらも「1→2→3」と同じ結果になるのですが、何が違うでしょうか？
よく区別される使いどころなどの例を教えて頂きたく思います。

【A】

$('.buttonA').click(function(){
	$.Deferred().resolve()
	.then(function(){
		console.log('1');
	})
	.then(function() {
		return hoo();
	})
	.then(function() {
		console.log('3');
	});
});

【B】

$('.buttonB').click(function(){
	$.when(
		console.log('1')
	)
	.then(function(){
		return hoo();
	})
	.then(function() {
		console.log('3');
	});
});

###ご質問➁
上の【B】は2つ目のthen()でreturnしていますが、次の【C】はしていません。
なぜ【C】だと順番の処理ができないのでしょうか？
そして【B】のreturnは、何を返していると考えればいいのでしょうか？

【C】

$('.buttonC').click(function(){
	$.when(
		console.log('1')
	)
	.then(function(){
		hoo();
	})
	.then(function() {
		console.log('3');
	});
});

###ご質問➂
上の【C】のconsole.log('1')とhoo()を入れ変えたのが次の【D】です。

なぜ【C】は順番の処理ができず【D】はできるのでしょうか？

そして【D】においては、【A】や【B】のようにreturn hoo()と書かなくてもhoo()だけでできるのはなぜでしょうか？(なぜwhen()の中だとreturnがいらず、then()の中だと必要になるのでしょうか？)

【D】

$('.button3').click(function(){
	$.when(
		hoo()
	)
	.then(function(){
		console.log('1')
	})
	.then(function() {
		console.log('3');
	});
});

Answer 1

ご質問➀

よく区別される使いどころなどの例

ドキュメントをお読みいただいた方が早いと思います。
deferred.then() | jQuery API Documentation
jQuery.when() | jQuery API Documentation

大雑把に言うと、jQuery.when()はdeferred.then()の複数版だと思えばいいでしょう。
複数のdeferredを引数にとりdeferredを返し、全てが成功した時に返したdeferredをresolveするものです。
例示のコードとは影響のない部分の違いのため、結果に差異が出ていません。

ご質問➁

なぜ【C】だと順番の処理ができないのでしょうか？

「順番の処理」というのは、「1→2→3」という結果が返ってくる、という意味でよろしいでしょうか。
この部分は、jQueryのドキュメントは少しわかりにくいので、MDNのドキュメントをご参照ください。（同じものではないですが、同じインターフェース？を持ちます）

もしハンドラー関数が・・・
(略)

• 何も返さなかった場合、 then によって返される Promise は undefined の値で解決します。

(略)

• 他の pending 状態の Promise オブジェクトを返した場合、 then によって返された Promise の解決/拒絶は、ハンドラーによって返された Promise の解決/拒絶結果に依存します。また、 then によって返された Promise の値は、ハンドラーによって返された Promise の値と同じになります。

Promise.prototype.then() - JavaScript | MDN

おわかりでしょうか？　前者が【C】で、後者が【B】です。
そのため、【B】は「ハンドラーによって返された Promise の解決/拒絶結果に依存し」後から解決されるため「1→2→3」になりますが、【C】は即座に解決されるため「1→2→3」になりません。

そして【B】のreturnは、何を返していると考えればいいのでしょうか？

もちろん、関数hooの戻り値です。このあたりは、通常の関数と変わりがありません。

ご質問➂

なぜwhen()の中だとreturnがいらず、then()の中だと必要になるのでしょうか？

return文は関数から抜け出し戻り値を返す文だからです。
文と宣言 - JavaScript | MDN
jQuery.when()が（というか、全ての関数は）引数に取るのは式です。
式と演算子 - JavaScript | MDN

なので、「when()の中だとreturnがいらず」というよりも、文法上returnを書くことができません。

Comments

[huyumin]

ご丁寧にどうもありがとうございます。

――ご質問➀――
なるほど。わかりました。ありがとうございます。

――ご質問②――
なるほど。when()→then()→then() とステップを超えるためには、returnがある場合はハンドラーのpromiseを得てから超えて、なければ即超えるわけですね。わかりました。ありがとうございます。

――ご質問➂――
なるほど。わかりました。
・関数は式を引数に取る。
・そして when() は関数で、then() は関数じゃない。
・だから when() の中は式しか書けず、then() の中は式だけでなく return という文も書ける。

ということはこういう感じでしょうか。
・関数である when() の中にある式 hoo() は、それを実行するだけで hoo() の戻り値が取得できる。
・けど、関数じゃない then() の中では hoo() を実行するだけでは戻り値が取得できないから return を書かないといけない。

あれ？ところで
・then() は関数ではなく、何と呼べばいいのでしょうか？

[Lhankor_Mhy]

> then() は関数ではなく、何と呼べばいいのでしょうか？

これは私の説明が悪かったです。

then()も関数です。
引数にとっているのは、関数式という関数を表現する「式」です。JavaScriptでは、式の中で関数を表現することができます。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/function#Description

関数式の中では return文 を書くことができる（書かない場合が戻り値がundefinedになる）ので、この違いが生まれているとご理解されるのがいいかと思います。

[huyumin]

・関数 when() は「式」を引数にとっていて、このとき return 文は書けない。
・関数 then() は「関数式」を引数にとっていて、return 文が書ける。
・そして「関数式」はreturnしないと undefined になる。

なるほど～。本当に基本をきっちり抑えていらっしゃる方な印象です。ありがとうございます。

[huyumin]

>式の中で関数を表現することができます。

と仰いますと、hoo() は「関数」なんだけど、「 then() の中に書いた「関数」」のことは「関数式」と呼ぶ感じでしょうか。

それとも、「 return の後に書いた「関数」」が「関数式」と呼ぶのでしょうか。

むずいですね。

きっと then() 以外にもいろいろな「関数式」があるんですね。

そもそも「関数」や「式」や「関数式」など用語と役割を理解する機会を避けてきてしまったので、そんな基本的なことから調べていきたいと思います！

Answer 2

質問➀

書き方が違うだけと思います。

-    $.Deferred().resolve()
+    $.when(

質問➁

順番の処理ができないのは【C】がreturnしてないからです。
【B】のreturnが返す値はconsole.log(hoo())とすればわかります。

他の質問で他の方に関数呼び出しを説明したことがありますが、関数呼び出しをご理解されていないと思われます。

関数呼び出しは

function test(a) {
  return a+1;
}

var x = test(1); /* test関数が2を返して(returnして)変数xに2を代入 */
var y = test(2); /* test関数が3を返して(returnして)変数yに3を代入 */
var z = test(3); /* test関数が4を返して(returnして)変数zに4を代入 */

ということです。

質問➂

順番の処理ができないのは【C】がreturnしてないからです。

returnやfunctionはJavaScriptの予約語で特別な意味があります。
関数呼び出しのreturnやfunctionを学んでください。

Comments

[huyumin]

どうもありがとうございます。関数呼び出しのコメントアウト、わかりやすかったです。returnやfunctionなでょ初歩的なことに立ち戻ってみたいと思います。