javascriptでvs varを聞かせて

Question

私はletにブロックスコープがあり、varには機能スコープがあることを理解しています。しかし、私はこのケースでは理解していない、レットを使用して、問題

const arr = [1,2,3,4]; 
for (var i = 0; i < arr.length; i++) { 
setTimeout(function() { 
    console.log(arr[i]) 
}, 1000); 
} // Prints undefined 5 times 

const arr = [1,2,3,4]; 
for (let i = 0; i < arr.length; i++) { 
setTimeout(function() { 
    console.log(arr[i]) 
}, 1000); 
} // Prints all the values correctly 

Answer 1

まず、出力は4回ではなく（あなたのコメントで述べたように）の5倍になります。 私はバベルREPLで自分のコードを貼り付け、これは私が得たもので、

"use strict"; 

var arr = [1, 2, 3, 4]; 

var _loop = function _loop(i) { 
setTimeout(function() { 
    console.log(arr[i]); 
}, 1000); 
}; 

for (var i = 0; i < arr.length; i++) { 
_loop(i); 
} 

あなたはどのように内部的に動作するようになりました聞かせて参照していますか？ :-)

Answer 2

を解決する方法あなたはまだsetTimeoutためvarを使用することができます。直ちに呼び出される関数式（IIFE）を使用して、setTimeout関数によって値iが認識されるように、setTimeoutの周りにクロージャを作成できます。

const arr = [1,2,3,4]; 
 
for (var i = 0; i < arr.length; i++) { 
 
(function(i){ 
 
setTimeout(function() { 
 
    console.log(arr[i]) 
 
}, 1000)})(i); 
 
}

Answer 3

これは、変数のスコープに関連するすべてです。のは、関数に作品の両方をラップし、出力を観察してみましょう：

function test() { 
 
    // `i` will be declared here, making it a non-for-loop scoped variable 
 
    const arr = [1, 2, 3, 4]; 
 
    for (var i = 0; i < arr.length; i++) { 
 
    setTimeout(function() { 
 
     console.log(arr[i]) 
 
    }, 1000); 
 
    } // Prints undefined 5 times 
 
} 
 

 
test();

だから、最初のケースでは、iが掲揚、およびのでsetTimeoutの非同期性のものであろう、iがします待たずにループが終了するとすぐに4になります。これにより、arr[i]は配列内のundefined要素を指すようになります。

第2のケースでは、iはループされておらず、ループの各繰り返しに対して有効範囲が設定されているため、console.logステートメントではiが正確に使用できます。このような結果は期待通りです：すべての

function test() { 
 
    const arr = [1, 2, 3, 4]; 
 
    for (let i = 0; i < arr.length; i++) { 
 
    setTimeout(function() { 
 
     console.log(arr[i]) 
 
    }, 1000); 
 
    } // Prints all the values correctly 
 

 
} 
 

 
test();