while文とfor文で挙動が変わる理由

Question

「ある要素をクリックしたらその要素に対応する部分へスクロール」というような実装を行おうとしております。
ある要素が3つと仮定し

const $link = document.querySelectorAll('a[href^="#"]');
for(let i = 0; i < $link.length; i++) {
    $link[i].addEventListener('click', (e) => {
        e.preventDefault();
        console.log(i);
    });
}

上記の結果ではクリック時にコンソールに「1, 2, 3」とうまく入っているのですが、

const $link = document.querySelectorAll('a[href^="#"]');
let i = 0;
while(i < $link.length) {
    $link[i].addEventListener('click', (e) => {
        e.preventDefault();
        console.log(i);
    });
    i++;
}

上記while文ではどれを押しても「3」しか出てきません。
上記にe.target.getAttributeとすれば対象の要素を取得はできるので問題はないのですが、
何故for文とwhile文のクリックイベントでiの数値の取得が変わるのかがわかりませんでした。

以上、よろしくお願いいたします。

Answer 1

whileの方はiの値が束縛されないので、この場合のconsole.log(i)では常に最終値である3を返しますが、
forにおいて制御変数をletで宣言するとforループ内でのブロックスコープを持つようになり、iは毎周新しい変数として宣言されているのと同義になります。
ですからconsole.log(i)は見た目上同じ変数を渡しているように見えますが、実は違う変数だったということになります。

参考 https://codezine.jp/article/detail/11353

Comments

[cryson]

大変分かりやすい解説と、非常にタメになる参考URLまでありがとうございました。
重ねて申し訳ないのですが、
・whileはループ外の実質1つのiに入っている3が出力。
・forはループ内で3つのiiが宣言されるようなもので、それぞれ1,2,3が出力。
というような解釈で間違いないのでしょうか。

[surface_0]

はい、そういう解釈で合っています。

蛇足ですが、querySelectorAll()の戻り値であるNodeListにはforEach()メソッドがあるので、
これで回す方が楽だと思います。引数にインデックスもついてきます。
https://developer.mozilla.org/ja/docs/Web/API/NodeList/forEach

```
$link.forEach((elem, index) => {
elem.addEventListener('click', (e) => {
e.preventDefault();
console.log(index);
});
});
```

Answer 2

スコープの問題です

  for(let i = 0; i < $link.length; i++) {
    $link[i].addEventListener('click', (e) => {
      e.preventDefault();
      console.log(i);
    });
  }
  let j=0
  for(j = 0; j < $link.length; j++) {
    $link[j].addEventListener('click', (e) => {
      e.preventDefault();
      console.log(j);
    });
  }

のような感じ
逆にwhileも中でletで受け直せばいけます

  let k=0;
  while(k < $link.length) {
    let l=k;
    $link[l].addEventListener('click', (e) => {
      e.preventDefault();
      console.log([k,l]);
    });
    k++;
  }