JavaScriptのfor文でvarを使っていたら無限ループになった

タイトルの通りハマりました。
JavaScriptのfor文でvarを使っていたら無限ループになった。

今までforの中で定義をした変数はその中だけ有効でしょう、と思ってました。
この無限ループにハマるまでは。

for文の中の変数をvarで定義していると、for文の外から参照が可能になっている。
このため、for文の外から変更が可能なため無限ループを作ってしまった。
ここでfunctionを1つ作って無限ループする例を書こうとしたのだけれど、危なさそうなのでやめました。

<script type="text/javascript">
for(var i = 0; i < 10; i++) {
  console.log(i);
}

console.log('out of for loop : ' + i)

</script>

// 結果
// 0
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9
// out of for loop : 10

対処方法はvarではなくてletを使うとfor文内で閉じた変数になる。

<script type="text/javascript">
for(let i = 0; i < 10; i++) {
  console.log(i);
}

console.log('out of for loop : ' + i)
</script>

// 結果
// 0
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9
// Uncaught ReferenceError: i is not defined at xxx.html:6

コメント

タイトルとURLをコピーしました