for(...){pointBtnAll...} 동작

Question

안녕하세요. 요즘 강의 정말 잘 보고있습니다 도움이 많이됩니다!! 제가 아래 코드를 잘 이해한건지 의아해서 질문올립니다. for ( let i = 0 ; i < pointBtnAll . length ; i ++ ){ ( function ( idx ) { pointBtnAll [ idx ]. onclick = function () { alert ( idx ); pageNum = idx ; pageChangeFunc (); } })( i ); } 즉시실행함수가 0,1,2를 각각 인자로 받고 바로 실행시켜버리려는데 click을 기다렸다가 클릭이 일어나면 해당 인자값에 맞는 함수를 실행시키는건가요? 그러니까 0,1,2를 인자로 받아서 미리 값을 얻어놓은 함수가, 어딘가의 메모리공간에 저장(?)되어있다가 클릭이발생했을 때 실행되나요? 뭔가 onClick으로 걸어놓으니까 마치 조건문처럼 click이 발생하지 않으면 실행이 안되다가 click해야 실행된다고 느껴져서 어렵네요 그리고 onClick을 addEventListener로 바꿔서 작성해보려는데 이해가 안가는 부분이 있습니다. 위의 코드에서 브라우저가 클릭이 발생하면, 어느 페이지를 로딩해야 할지 알 수 있게끔 for문을 돌려가며 페이지 수를 i로 전달해줬기 때문에 딱 클릭한 그 페이지가 나올 수 있다고 생각했습니다. 그런데 이벤트리스너로 써주면, 클릭이 발생했을 떄 어느 페이지를 클릭한건지 감지할 수 없지않나요? 이벤트리스너의 콜백함수에 마찬가지로 for문을 돌려주려했는데 그러면 그냥 클릭했을 때 i=0,1,2 한번씩 순회하고 끝. 이럴거같네요. 이럴거같다고 말씀드린부분은 pointBtnAll로 이벤트리스너 해주면 not a funtion 에러가 나와서 이부분 해결을 못하고있어서 직접 실행해보진 못했습니다. ㅎㅎ;;다 쓰고보니 질문이너무 기네요 ㅠㅠ간략하게나마 설명해주시면 이해될때까지 곱씹어보겠습니다 감사합니다

코딩일레븐 · Answer

안녕하세요. for문은 한번에 휙 돌아버리는 거라 var로 할 경우 마지막 i를 반환합니다. (갯수가 5개라면 0~4까지 돌고 i값은 무조건 4를 반환) let으로 할 경우 for (let i = 0; i < pointBtnAll.length; i++) { pointBtnAll[i].addEventListener("click", function () { alert(i); }); } i값이 각각 잘 찍힐겁니다. 0~ 갯수까지 심플하게 위처럼 하셔도 괜찮습니다. var로 했을경우 0~4까지 잘 찍힐 것이라 예상이 되는데 안되는 것은 var가 i를 계속 새로 선언해서 일어나는 상황입니다. var i = 1, i =2 ... let이 각각 넘버를 물고, 버튼 클릭 값을 제대로 가지고 온다고 보시면 됩니다.