varとletの違い for文内部でループカウンタを使いたいときはletを使うべき

ボタン1~ボタン3というボタンが3つある

ボタン1を押したときはコンソールに1と出す

ボタン2~以下略

 

このとき、ループカウンタをvarで宣言すると、どのボタンを押しても3と出てしまう

for - loopCounter is var - JSFiddle - Code Playground

これは、varが関数スコープであり、forの外側でも生きていることが原因。

つまり、イベントリスナ登録時にはiは変数のまま登録されており、イベントリスナが呼び出されたとき、その時点での最新のiを入れて関数を実行してしまう。

登録したときの状態でイベントリスナを静的に登録するような感じがするけどそうではないということ。

 

ループカウンタをletにすると改善する。

letがブロックスコープ={}で囲まれた範囲でのみ有効な性質を持つため。

for - loopCounter is let - JSFiddle - Code Playground

forの1回ごとがブロックスコープになっているので、常にそのときの値でイベントリスナ登録される。

 

参考

下記ページとか、「var let スコープ」とかでぐぐったらいろいろ出てくる

qiita.com