for文でのイベントリスナについて

Question

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

上記のurlに書かれていた以下のコードで質問があります

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
</ul>

...
<script type="javascript">
  var items = document.querySelectorAll('li');
  for (var i = 0; i < 5; i++) {
    var li = items[i];
    li.addEventListener('click', function() {
      alert(li.textContent + ':' + i);
    });
  };
</script>

サイトの説明での、
イベントリスナはfor文の後に呼ばれる
というのは理解できました

ですが何故forの中で定義しているのにも関わらず、同じ値になるのでしょうか

ブラウザ内で実行されているイメージがつかめずモヤモヤしています。

超初心者な質問ですみませんが、どなたか補足説明をおねがいします。m(_ _)m

Comments

[退会済みユーザー]

https://teratail.com/questions/31919
こちらが参考になるかと思います。

[x_x]

type="javascript" ではそもそも動かないでしょうに。いい加減な記事ですねぇ

Answer 1

こんな風にするとよいでしょう

<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('li'),function(li,i){
    li.addEventListener('click', function() {
      console.log(li.textContent + ':' + i);
    });
  });
});
</script>

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
</ul>

Comments

[meru53]

ありがとうございます。

まだ初心者で色んなソースを見る経験が浅いため、違う書き方はとても参考になります。

Answer 2

ですが何故forの中で定義しているのにも関わらず、同じ値になるのでしょうか

varで宣言した場合、forで回す変数は全部同じ変数です。つまり、このコードは以下のように書くのと同じなのです。

  var items = document.querySelectorAll('li');
  // ループと無関係に、同じ変数
  var i = 0;
  for (i = 0; i < 5; i++) {
    var li = items[i];
    li.addEventListener('click', function() {
      alert(li.textContent + ':' + i);
    });
  };

ループを抜けきった後にはiは5となっていて、リスナーからは変化した後のiを参照することとなります。

Comments

[maisumakun]

なお、letで書いた場合はループ1回毎にスコープが取られるようになっていますので、このような問題は発生しません。

[meru53]

ありがとうございます。
ループごとにスコープが取られるということがイメージできていなかったようです。

Answer 3

この問題ですと、細かい動作としては以下のようになります。

変数iが値0で宣言される。

forループの1回目のイテレーションが実行される。

• iは0、liは1つ目のリストアイテム。

forループの2回目のイテレーションが実行される。

• iは1、liは2つ目のリストアイテム。

forループの3回目のイテレーションが実行される。

• iは2、liは3つ目のリストアイテム。

forループの4回目のイテレーションが実行される。

• iは3、liは4つ目のリストアイテム。

forループの5回目のイテレーションが実行される。

• iは4、liは5つ目のリストアイテム。

iが5に加算されたところで、forループが終了する。

ここまでは元のサイトに書かれているとおりで、ポイントは最後にi=5になっているところです。
イベントリスナは、forが終わった後に実行されるのでイベントリスナ内に書かれている

alert(li.textContent + ':' + i);

に使われている「i」はforが終わったときに設定された「5」になっており、その後変化しないためにどこをクリックしても「5」が表示されます。

ポイントとしては、「変数は呼び出されたときに値が検証される」という事です。

「定義」と聞くとその時点で数値が確定するイメージがあるので少し混乱しますよね。

Comments

[meru53]

ポイントの部分がまさに自分が勘違いしていた所でした！

cなどコンパイルする言語のイメージで考えていました。
ありがとうございました。

Answer 4

変数がvarで定義されているので、変数iとliの値が最後に設定された値になってしまっています。
変数をletで定義することでブロックスコープが作られるため、イメージしている通りの動きになるかと思います。

var items = document.querySelectorAll('li');
for (let i = 0; i < 5; i++) {
  let li = items[i];
  li.addEventListener('click', function() {
    alert(li.textContent + ':' + i);
  });
};

Comments

[mather]

let のあとに変数名が抜け落ちてますね

[meru53]

ありがとうございます

ブロックスコープの違いによる説明でわかりやすかったらです。

ちなみにブロックスコープがそれぞれ作られるということは、letの変数だとループ回数分のエリアが確保されるということでしょうか。
(iが4バイトでループ回数1000回なら4k)

本来の質問からはそれてしまいますが、
その場合、スコープが解放されるタイミングも気になりました。