開発部

letとvarに違いがあったという初歩的なつまずき

開発スタッフAです。

Javascriptで変数宣言の時constとletを普段は使ってるんですが、古いAndroidだとエラーするのでサイトによってはvarにしたりします。
let=varの感覚で雑に変換していたらドツボにハマったので備忘録的に書き残しておこうかなと。

for(let i = 0; i < 10; i++){

setTimeout(function(){

   console.log('i='+i);

},i*100);

}

ソースとしてはこんな感じで。
これだと普通にi=0〜9の連番が出力されるわけですが。
次にvarでやってみます。

for(var i = 0; i < 10; i++){

setTimeout(function(){

   console.log('i='+i);

},i*100);

}

これだとi=10が10回ほど続きます。
検索したところletとvarでは変数のスコープが違うようで。
varだとfor内だったらどこでもアクセス出来てる感じですかね。
これは10まで数えきった時にsetTimeoutでiを呼び出しているのでletの時のような動作にはなりません。
ここで原因がわからず30分くらい格闘してました。
letとvarでそんな違いがあるとは。
雰囲気でJavascript書いてる人間としては目から鱗でした。

ちなみにletの方に近づけるには

for(var i = 0; i < 10; i++){

 setTimeout(show(i),i*100);

}

function show(num){

console.log('i='+num);

}

とりあえず外部関数増やせば解決は出来るかなと。
よっぽどのことがない限りletでいいですわな。
今後も精進いたします。

文:開発スタッフA