forループ内でのsetTimeoutについて

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

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

Javascript初学者です。
最初のfor文では3が3回出力され,2つ目のfor文では0,1,2が出力されます。なぜどちらも0,1,2が出力されないのか、またこの2つのfor文でどうして出力が異なるのかわかりません。理由を教えてほしいです。

think49

2020/05/05 00:22

https://teratail.com/help/question-tips#questionTips3-5 ”teratailではソースコードをシンタックスハイライトすることができます。シンタックスハイライトをすると、ソースコードが分類ごとに異なる色やフォントで表示され、他のユーザーが見やすくなります。質問入力画面でソースコード部分をドラッグで選択し、入力ボックス上部のボタンを押すと適用されます。”

行動規範の内容に同意します

回答2件

ベストアンサー

理解すべきことが２つあります。

1 for ループ内での setTimeout の挙動
for内の setTimeout は、forループを抜けたあとで実行される。

過去の質問「forとsetTimeoutを合わせてsleepさせたい」の回答にもありますが、「シングルスレッド」故の特徴です。
第二引数に何ミリ秒後を指定しますがループ回数によっては遅延が発生します。

２変数と関数、変数宣言とスコープ
変数と関数の関係は、関数が実行されるタイミングで参照されるので、宣言によって保持している値が変わります。
var は関数ブロック、let はブロック内で拘束される（let は局所変数として追加実装された宣言子）。

ご質問のコードにおいて、
前者は var 宣言なので for 文のブロックで次々と上書きされ、for を抜けた後で実行されるsetTimeout に与えた関数は、３になった i を参照します。
後者は for 文のブロック内で有効な let 宣言のため、 forを抜けた後で実行される setTimeout に与えた関数は、宣言に応じた 1,2,3 という値を参照します。

「let var 違い」で検索してみると、let が局所変数として追加された頃のエンジニアの考え方を垣間見ることができます。（一例： qiita letとvarの違い）

投稿2020/05/04 21:00

AkitoshiManabe

総合スコア5434

kouta000

2020/05/05 14:47

ご指摘いただいた内容を調べて理解することができました。大変わかりやすい解説ありがとうございました。

行動規範の内容に同意します

var はforループを抜けても変数が存在し続けます。setTimeout は時間経過後に最終的な変数の値を表示します。
let はループ内だけで有効なローカル変数。forループを抜けると変数が破棄されてアクセスできなくなります、それでは困るので、setTimeoutに渡す関数を定義する毎にその時点の外部変数を抱え込むようになっています。これをクロージャといいます。なので、ループごとの変数の値を表示できます。

以下のプログラムで変数の値と表示順序を確認してみるといいです。

js
1for (var i = 0; i < 3; i++) {
2setTimeout(() => console.log(i), 1);
3}
4
5for (let i = 10; i < 13; i++) {
6setTimeout(() => console.log(i), 1);
7}
8
9console.log("i =", i);