for と for ... of で let を用いた時の動作の違いについて

Question

var target = [1,2,3]
for (let value of target) {  
  window.setTimeout(function(){
    console.log(value);  
  },1000)
};
for (let i=0; i<target.length; i++) {
  window.setTimeout(function(){
    console.log(target[i]);  
  },1000)
};

//想定してた出力結果
//1
//2
//3
//1
//2
//3
//実際の出力結果
//3
//3
//3
//1
//2
//3

何故このような違いが出るのかを教えてください。

Answer 1

【Create a new fiddle - JSFiddle】
https://jsfiddle.net/bmyjpLma/

Firefoxでは質問文と同じような問題が起き、Choromeなら起きませんでした。

---

ちなみに下記コードもFirefoxではシンタックスエラーを起こします。英語版のほうにこれについてはバグとして上がっているようです。(ver.51でフィックス)

let iterable = [10, 20, 30];
for (const value of iterable) {
  console.log(value);
}

【for...of - JavaScript | MDN】
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of#Browser_compatibility

Prior Firefox 51, using the for...of loop construct with the const keyword threw a SyntaxError ("missing = in const declaration"). This has been fixed (bug 1101653).

Comments

[Lhankor_Mhy]

それと同様のバグなら = の有無に左右されるかな、と思って
for (let i; (i=i||0)<target.length; i++) {
とかやってみましたが、そんな単純な話ではなかったですねｗ

やっぱりバグかなあ？　仕様としてはChromeの結果が正しいんですよね？

[maisumakun]

JavaScriptなら書けると知ってはいても、「アクセント記号付きの変数名」というのにはやはり否定的に反応してしまいます。

[kei344]

To: Lhankor_Mhy
仕様としてはChromeの結果が正しいと思います。

To: maisumakunさん
「MDNの記述を変えることなく書いてエラー」という例なのでご容赦いただければ･･･。
↑訂正、書いていませんでした。修正します。

[kei344]

To: maisumakunさん
フランス語版のものを参照していたようです。回答を修正しました。
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for...of

[Lhankor_Mhy]

フランスのプログラマはアクセント符号付けたコード書くんですね……

[think49]

ブロックスコープ全般がダメかと思いきやfor-of限定で再現するんですね…。
(回避する方法はあるので実害は大きくなさそう)
https://jsfiddle.net/0wdmh5uy/

Answer 2

for (let value of target) {  
  window.setTimeout(function(){
    console.log(value);  
  },1000)
};

単純に、1秒待っている間にvalueへの取り出しがtargetの最後まで進んでいるからではないでしょうか

for (let value of target) {  
  console.log(value);  
};

これなら確実に 1, 2, 3 と出力されると思います

Comments

[Lhankor_Mhy]

だとすると、後半のforでも同じことが起こるはずですよねえ……

[takito]

・・・ですよね　コメント出してからそう思いました・・・

[takito]

コードをそのままコピペしてChromeで実行してみたら、うまいこと 1 2 3 1 2 3 と出ました
違いはなんでしょうね・・・

(なんか当たり前のことを書いてたのでここ消します・・・頭がウニだ・・・）

[Lhankor_Mhy]

あれ？環境依存？
当方firefoxでしたが、Chromeで確認してみます。

[Lhankor_Mhy]

Chromeで123123と出ました。うわー、Firefoxのバグの可能性が出てきましたね。