ブロックスコープだとか、関数スコープとかで、言うけど、なんとなく一緒だと思ってたけど、明確にふるまいが違うのが、発生した。
qiita.js
for(let i = 0 ; i < 10 ; i++){
console.log(i);
}
と
qiita.js
for(var i = 0 ; i < 10 ; i++){
console.log(i);
}
は同じ。
1,2,3,4,5,6,7,8,9
これは、その時点でconsoleが発動されるので納得できる。
1ミリ秒でも後に実行されるもので確認してみる
qiita.js
for(let i = 0 ; i < 10 ; i++){
setTimeout(()=>console.log(i),1)
}
は同じ。
1,2,3,4,5,6,7,8,9
qiita.js
for(var i = 0 ; i < 10 ; i++){
setTimeout(()=>console.log(i),1)
}
は違う
10,10,10,10,10,10,10,10,10,10
これは、for文が終わった後に呼ばれるので、10になってる。
jQueryで、例えば、
qiita.js
for(var i = 0 ; i < 10 ; i++){
$(".btn").eq(i).click(()=>{
//i番目がクリックされた事にしたいとしても
function(i);
})
}
ってしても、どれをクリックしてもfunction(10)が発動してしまう
qiita.js
for(let i = 0 ; i < 10 ; i++){
$(".btn").eq(i).click(()=>{
//i番目がクリックされた事にしたいとしても
function(i);
})
}
ってすると、n番目をクリックしたらfunction(n)が発動する。
letの方が、自分としてもイメージ通りの動作をして、varがバグっぽい動作に感じるので、constやletを面倒でvarばっか使っていたのを、改善しなくちゃって思いました。