[JavaScript] for문에 var을 쓰면 안되는 이유

예시코드

let button = $('.tab-button')
let content = $('.tab-content')

for(var i = 0; i < button.length; i++){
    button.eq(i).on('click', function () {
        button.removeClass('on');
        button.eq(i).addClass('on');
        content.removeClass('show');
        content.eq(i).addClass('show')
    })
}

해설

tab-button은 3개이고, tab-content또한 3개이다.

이 코드에서는 각 버튼에 클릭 이벤트리스너가 발생되지 않는다.

그 이유는 var의 특징 중에 하나인 함수 스코프와 클로저 문제이다.

'var' 키워드로 선언한 'i'는 함수 스코프를 가지고 반복문 내에서 생성된 모든 이벤트 핸들러에서 같은 'i'변수를 공유한다.

함수가 끝나고도 i의 값(3)은 남아있게 되고 클릭 이벤트가 추가 되어도 마지막 i값에 해당하는 인덱스 값으로 동작하게 된다.

해결 방법

let 사용

let button = $('.tab-button');
let content = $('.tab-content');

for (let i = 0; i < button.length; i++) {
  button.eq(i).on('click', function () {
    button.removeClass('on');
    button.eq(i).addClass('on');
    content.removeClass('show');
    content.eq(i).addClass('show');
  });
}

forEach 사용

let button = $('.tab-button');
let content = $('.tab-content');

button.each(function (index) {
  $(this).on('click', function () {
    button.removeClass('on');
    button.eq(index).addClass('on');
    content.removeClass('show');
    content.eq(index).addClass('show');
  });
});