Event handler with loop in javascript

자바스크립트를 공부하면서 for문 안에 onclick 같은 이벤트 핸들러를 넣으면 그 수에 맞게 작동을 할 것같다. 

 

하지만, 스코프 문제 때문에 그렇치 않음을 알 수있다.

 

흔히 볼 수 있는 예제를 보자. 

 

출처 : https://stackoverflow.com/questions/6487366/how-to-generate-event-handlers-with-loop-in-javascript

 

<a href="#" id="b1">b1</a>
<a href="#" id="b2">b2</a>
<a href="#" id="b3">b3</a>
<a href="#" id="b4">b4</a>
<a href="#" id="b5">b5</a>
<a href="#" id="b6">b6</a>
<a href="#" id="b7">b7</a>
<a href="#" id="b8">b8</a>
<a href="#" id="b9">b9</a>
<a href="#" id="b10">b10</a>

for(i=1; i<11; i++) {
    document.getElementById("b"+i).onclick=function() {
        alert(i);
    }
}

그러면 저위에 링크된 b1~b10의 버튼을 클릭하면 for문을 돌아서 b1을 누르면 1이뜨고 10을 누르면 10이 나오게 될 꺼라고 생각을 한다. 

 

하지만, for문안에 i를 보자. 앞에 변수 타입을 설정안해주면 전역변수로 들어간다고 배웠다.

 

그러면 저 for문의 i의 값은 무엇인가?

 

답은 11이다. 

 

따라서, 저 위에 같이 버튼을 클릭하면 11이 뜬다.

 

이것을 해결할라면 3가지 방법이 있다. let 과 IIFE와 클로져. 

 

이상 끝.