JavaScriptのfor文の中での関数実行

Question

JavaScriptのfor文の中での関数実行に関する質問です
質問は、なぜ関数がfor文の回数分実行されるのかについてです。

参考サイトhttps://qiita.com/ukiuni@github/items/463493a690265cec8bb7

for (var i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i);
    }, 0);
}

様々なサイトで、for文実行中は関数が実行されずに、終了後にiの最後の値を参照して実行されるという記述を見ました。しかし、for文が終了した後に、関数の実行回数がfor文の回る回数と同じになっていることが理解できません。for文実行中に、○○回回ったという情報がどこかに記憶されて、for文終了後に関数を実行する際、iは最後の値だけを見て、回数はその記憶から引っ張り出してくるから、iは最後の値のまま5回回るという結果になるのでしょうか？
クロージャなどがまだ理解できず、すごく単純に以下のように考えています。
・for文が終わったのであれば、関数の実行は1回だけのはず。なぜならforという繰り返し処理が終わっているのだから
・しかし実際はfor文のブロックの中に関数がいるので、関数は繰り返し処理に含まれている
・繰り返し処理に含まれていて、関数の外にある変数も参照できるのあれば、iも参照できるはずで、iを参照できるなら、iの数が変わったことも関数内でわかるはず
なぜ関数はfor文の回数分実行されるのでしょうか？

Comments

[m.ts10806]

単にforの回数だけsetTimeoutが実行されている処理にしか見えませんけど…

[Takumiboo]

for文の中では関数は実行されないなんてどこに書いてあるんですか…。

Answer 1

どんな処理が順番に実行されるか、流れを簡単な言葉で記します。

1. イベントループ開始
2. i = 0 (for文開始)
3. setTimeout実行 0秒後のイベントループ（0なので今回は次）で実行されるようにタスクキューとして溜め込む
4. i++
5. setTimeout実行 0秒後のイベントループにタスクキューとして溜め込む
6. i++
7. setTimeout実行 0秒後のイベントループにタスクキューとして溜め込む
8. i++ (for文終了)
9. やることなくなったら、次のイベントループまで待機
10. イベントループ開始
11. タスクキューがあるのでコールスタックに追加
12. 以下コールスタックを実行
13. console.log(i) 1回目のsetTimeoutで登録されたタスクを実行
14. console.log(i) 2回目のsetTimeoutで登録されたタスクを実行
15. console.log(i) 3回目のsetTimeoutで登録されたタスクを実行

以上、こんな感じの動作になっています。

Answer 2

setTimeoutは「何ミリ秒にこの関数を実行する」予定を積む関数です。そして、予定として積まれた各関数は、同じiを参照しますので、実行前にiがループを抜けきって5となっていれば、その5を表示します。

これに対して、ループ変数をletで宣言した場合、それはループ1回ごとに別個の変数として扱われますので、setTimeoutの中のiが紐づくのも、ループ1回ごとに確保された変数となりますので、登録時のiの値がそのまま残ることとなります。

Comments

[maisumakun]

JavaScriptはシングルスレッドですので、同期的な処理が続いている間はsetTimeoutの中身の関数は実行されません。forループが長引いても、各関数の実行はループの終了より後です。

[maisumakun]

addEventLitenerは同じ関数を複数回登録してもイベント1回につき同じ関数は1度しか実行されませんが、setTimeoutを使って同じ関数を複数回登録すると、登録した回数だけ実行されます。

[kei344]

> addEventLitenerは同じ関数を複数回登録しても
質問文のようなコードの場合複数回登録したコードが、登録した回数だけ実行されませんか？「同じ関数」と書くなら例示しないとわかりにくいと思います。
https://jsfiddle.net/wtezu6yh/1/

Answer 3

【JavaScript入門】setTimeoutの使い方とサンプル事例まとめ！

0ミリ秒と指定されたsetTimeoutはすぐに実行されるように思いますが、先にメインの実行処理が行なわれるのです。

ただこういう理由なだけです。
その時の変数の動きについてはご提示のQiitaに書かれている通りですね。

Answer 4

貼っていただきました参考サイトでは
for文の中でsetTimeoutを使った場合のケースを説明しており、
for文の実行後にsetTimeoutが３回実行されるため
すでに変数iには３が入っているので、3の出力が３回あると記載されています。

「for文実行中は関数が実行されず」
という解釈は勘違いかと思います。

Comments

[e-suzuno]

私自身混乱を招いてしまってますが
関数という主語が大きいせいで、
setTimeout関数 と表記をしていればもう少しわかりやすかったかもしれません。

Answer 5

○○回回ったという情報がどこかに記憶されて

for の初期化部分（initialization）で宣言されている i に記憶されています。

・for文が終わったのであれば、関数の実行は1回だけのはず。

forの繰り返しで、setTimeout() を 3回実行しており、時限実行する関数 は３つ設定されています
（３つとも、for が終わってから実行されるように予定されます）。

iを参照できるなら、iの数が変わったことも関数内でわかるはず

時限実行する関数は、外側のブロックにある変数 i を参照しますが、
for の初期化部分（initialization）で

1. var 宣言されたものだと、実行時の値を参照します（3, 3, 3）。
2. let 宣言されたものだと、for ループのブロック内の記述に応じた値を参照します（0, 1, 2）。

// let で宣言した場合
for (let i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i);
    }, 0);
}

この違いは スコープ やブロック を理解すると疑問も解消できるのではないかと思います。

---

クロージャなどがまだ理解できず

クロージャは、変数を var 宣言しかできなかった時代に、外部から変数の値を書き換えられることがないようにする 特殊な関数生成の手法です。古いコードを読み解く時には必要ですが、let, const が使える現代は、慌てて覚える必要は無くなっていると思います。
局所変数宣言のletと 定数宣言のconst を先に覚えましょう。

Answer 6

for ループで、3回setTimeoutが呼び出されるので、「0秒後にfunction内の処理を実行する」というタイマーが3個セットされることになります。直感的には、0秒後なのでforループ中にすぐに実行されるように思えますが、JavaScriptの仕様上そうはなりません。forループを抜けた後に3個のタイマーが実行されます。これがforループを抜けた後に関数が3回実行される要因となります。
また、関数内で表示されるiの値は、forループを抜けた後なので3になっています。

Answer 7

setTimeoutが外の変数を参照しているからですね
おそらく非同期プログラムの最適化の恩恵だと思います

よくあるのはvarをletにする処理ですが

for(let i = 0; i < 3; i++) {
  setTimeout(()=>{
    console.log(i);
  },0);
}

きちんと引数で渡せば参照されます

for(var i = 0; i < 3; i++) {
  console.log(x);
  },0,i));
}

また、きちんと非同期処理を管理すれば引数で渡さなくても大丈夫です

(async()=>{
for(var i = 0; i < 3; i++) {
  await new Promise(resolve=>setTimeout(()=>{
    resolve(i);
  },0)).then(console.log);
}
})();

※あっぷされない

Comments

[yambejp]

ここ2-３日ちょっとながい回答が全然アップできない
本文が更新できないのでレスでいくつかサンプル

[yambejp]

(1)letで処理
for(let i = 0; i < 3; i++) {
setTimeout(()=>{
console.log(i);
},0);
}

[yambejp]

(2)引数で渡す
for(var i = 0; i < 3; i++) {
console.log(x);
},0,i));
}

[yambejp]

(3)同期で処理する
(async()=>{
for(var i = 0; i < 3; i++) {
await new Promise(resolve=>setTimeout(()=>{
resolve(i);
},0)).then(console.log);
}
})();