javascript에서 for문을 사용하면 생기는 이슈

javascript에서 for문과 onclick과 같은 나중에 불리는 함수를 사용하게 되는 경우에 생각하지 못한 결과를 얻습니다.

for(var a=0;a<10;a++) {
    var b=document.createElement('b')
    b.onclick=function() {
        alert(a)
    }
    b.innerHTML=a
    document.body.appendChild(b)
}

스택오버플로우에 있는 간단한 코드를 보겠습니다. for문에서 b element를 만들고 이게 클릭될 때마다 for문에서 사용되는 a값을 출력하도록 되어있습니다. 

총 10개의 b가 생성되며 각각이 클릭될 때마다 0~9의 값이 alert 창에 뜰 것 같지만.. 그렇지 않습니다.

10개의 b모두 for문에 사용된 a의 마지막 값인 10을 출력합니다.

좀 어려운 내용인데 javascript가 block scope를 사용하지 않기 때문에 발생하는 문제라고 하네요. 자바 스크립트에서 모든 변수는 그 변수가 속함 함수

의 lifetime을 가진다고 합니다.

일단 아래에 관련 링크 남깁니다.

https://stackoverflow.com/questions/6048561/setting-onclick-to-use-current-value-of-variable-in-loop 

https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example 

https://dzone.com/articles/why-does-javascript-loop-only-use-last-value