JavaScript のクロージャーと for 文の let 初期化の例外

先日、次のような JavaScript クイズを Twitter で出しました。 // JavaScript quiz: 出力は？ const a = []; { for(let i = 0; i < 10; i++) { a[i] = () => console.log(i); } } a[3](); { let i; for(i = 0; i < 10; i++) { a[i] = () => console.log(i); } } a[3](); { for(let i = 0; i < 10;) { a[i] = () => console.log(i); i++; } } a[3](); — Takuo Kihira (@tkihira) August 15, 2022 答えは 3, 10, 4 なのですが、for 文の let 初期化専用の例外処理がない場合は 10, 10,

[mak_in]

this問題含めコレがクイズになっちゃう言語仕様ってどうなのよ、思っちゃうのでjavascriptの昔の書き方は忌避してる。どうしても古い書き方が必要ならtypescriptのトランスコンパイルで。学べばいいだけなんだけど忌避感が…

[send]

これは知らなかった。素直に全部10かと思った

[tk_musik]

この仕様を知らなくてもTDDすれば分かるのでテスト書きましょうってか

[hylom]

for文内での変数宣言はループのブロック内の先頭で毎回宣言されることと同義、と考えると覚えやすいです

[manaten]

クソザコなので全部10じゃないかと思ってしまった上で、問題にするくらいだから違うんだろうという逆張りで正解するパターン。JS好きだけど危険な仕様には普段近づかないので、知らないことがたくさんある

[paulownia]

ESLintのno-loop-funcルールは例外挙動にならないループ内のクロージャ作成をエラーにするんよね。この例だと最初がエラーになる

[aceraceae]

JavaScript は console.log も参照してるだけだからどんどん値が変わるんでその時点の値だと思うとハマるんだよね。

[n314]

原理はともかく、何となくで答え分かるもんなんじゃないの…？バグに直結するよね。今はfor使わずに全部forEachとかにしてるのかな。

[arapro]

まさに歴史狩る環境

[riawiththesam]

数値が何になるかは答えられなくてもヤバそうだなと感じられればそれで充分

[Phenomenon]

ここらへん辛い

[mayumayu_nimolove]

変態言語め

[maruware]

10, 10, 10かと思った。むずい。

[xlc]

let と => がない時代のJSで、ループ変数に依存したコールバックを書こうとするとめちゃくちゃ冗長なコードになる。

[ku__ra__ge]

ES2015より前のコードのforブロック内は (function() { var _i = i; a[i] = function() { console.log(_i); }; })(); の方が素直だな。

[Shinwiki]

=>これきらい

[ockeghem]

勉強になるなぁ

[AmaiSaeta]

最後が4になる奴だけ外した……JavaScriptﾅﾝﾓﾜｶﾗﾝ……

[yarumato]

“当たり前ですが、関数は実行されるまで実行されません。すなわち実行される時に変数の値が改めて参照される。　JavaScriptのfor文のlet初期化変数のみ例外的な挙動は、言語の一貫性を犠牲にして便利さを優先した仕様”

[nmcli]

依存したくない仕様

[tofu-kun]

感覚でそんな感じだった気がするが、仕様は全く知らなかった…