클로저와 스코프 깊이 이해 - 이벤트 리스너와 함께 사용할 때의 주의 점 및 코드 리뷰

 

 

안녕하세요. 오늘 진행할 리뷰는 JavaScript의 클로저와 스코프에 관한 것입니다.

 

문제 제시

function setupButtons() {
    for (var i = 0; i < 5; i++) {
        var button = document.createElement('button');
        button.textContent = 'Button ' + i;
        button.addEventListener('click', function() {
            console.log(i);
        });
        document.body.appendChild(button);
    }
}

setupButtons();

위 코드는 5개의 버튼을 생성하고, 각 버튼이 클릭될 때 해당 버튼의 번호를 출력하는 이벤트 리스너를 추가합니다. 그러나 이 코드는 예상과 다르게 모든 버튼이 클릭될 때마다 '5'를 출력하는 문제가 발생한다고 하내요. 이는 JavaScript의 클로저와 'var'의 함수 단위 스코프 특징 때문입니다.

 

 

해결 방안 제시

이 문제는 'let'을 사용하여 블록 스코프를 적용하거나, 즉시 실행 함수(IIFE)를 사용하여 클로저를 생성하는 것으로 비교적 간단하게 해결할 수 있습니다. 아래는 'let'을 사용한 해결 방법입니다.

function setupButtons() {
    for (let i = 0; i < 5; i++) {
        let button = document.createElement('button');
        button.textContent = 'Button ' + i;
        button.addEventListener('click', function() {
            console.log(i);
        });
        document.body.appendChild(button);
    }
}

setupButtons();

위와 같이 수정하면, 각 버튼이 클릭될 때 해당 버튼의 번호를 정확하게 출력할 수 있습니다.

 

---

코드 리뷰 문의 주세요.

함수 리뷰를 기본으로 합니다.

생각 못한 다양한 예외 상황이나

이상 코드 피드백 드립니다.

 

 

오픈톡방 '익스랩 코드 리뷰 신청방'을 검색하세요!

간단한 리뷰는 무료입니다!

---