JavaScriptのコールバック関数

Question

JavaScriptのコールバック関数について。以下の二つのコードでは出力される順序が変化するのですが、なぜ変化するかわかりません。

このコードでは 2 1 と出力されます

setTimeout(function() {
  console.log(1);
}, 1000);

console.log(2);

このコードでは 1 2 と出力されます

func = function() {
  console.log(1);
}

setTimeout(func(), 1000);

console.log(2);

同じ処理のように思うのですが、順序が変化するので、その理由を知りたいです。

Answer 1

func = function() {
  console.log(1);
}

setTimeout(func, 1000);

console.log(2);

setTimeoutの第一引数は関数名です。()をつけるから即時実行されます。

Answer 2

misak1さんの仰られている通り、第一引数に()はつけません。
()をつけた場合、 func()を実行した結果がsetTimeoutに設定されてしまいます。

なので、次のようなコードの場合このような動きになります。

var fn_a = function(){
	console.log("out_a");
};
var func = function() {
  console.log(1);
  return fn_a;    // 関数を返す。
};

setTimeout(func(), 1000);

console.log(2);

1. func()が実行され1が出力される。
2. return されたfn_a関数がsetTimeoutにセットされる。
3. console.log(2);で2が出力される。
4. １秒後にsetTimeoutからfn_a()が実行され、out_aが出力される。

Answer 3

setTimeoutでは処理をタイマーに投げ込むので、1秒後にconsole.log(1)になるのです。