for文の宣言について
解決したいこと
forを用いたときのスコープについて教えて欲しいです。
解決方法が分かったのですが、いまいち納得がいかず、、、
for(i=0;をfor(let i=0;にしてスコープを縛るとこまではわかりました
しかし、スコープ外でデバッグすると、iが2で返されてしまいます。
どこかで再代入されているならまだしも、
2なんか入れた覚えはないぞ、、というところで
なぜそうなるかを教えていただけたら幸いです
該当するソースコード
<label><input type="checkbox" name="group" value="大谷" checked>大谷</label>
<label><input type="checkbox" name="group" value="藤浪">藤浪</label>
<ul id="setValue">
<ul>
let array = [];
let obj = {};
let group = document.getElementsByName("group");
let setValue = document.getElementById("setValue");
let li = document.createElement('li');
for(i=0;i<group.length;i++){
console.log(i) //結果 0 ,1,2
group[i].addEventListener("click",function(e){
console.log(i) //結果2
array = [];
for(j=0;j<group.length;j++){
console.log(i) //結果 2 2 2
group[j].checked = false
}
console.log(i)
e.checked = true;
if(group[i].checked){
console.log(i) //結果エラー
setValue.appendChild(li)
}
})
console.log(i) // 結果 0.1.2
}
console.log(i) // 結果2
自分で試したこと
for内にletを宣言すれば、とりあえずここの問題は解決しましたが
なぜそうなるかの理由を調べてもわからず、、
console.log()で各スコープをデバッグした結果をコメントアウト致しましたので、、よろしくお願いします
＊このソースコードはまだ完成はしていません。スコープの悩みだけでも解決できればと思い
1
