탭기능 만들며 배우는 for 반복문

코드에 class 를 때고 붙히는 식으로 버튼을 구성

 

 

 

 

for 범위에서 i를 선언할때 var,let의 차이 

변수의 범위차이이다. 

일단 for 을 실행하면

 

for (let i = 0; i <3; i++) {
    $('.tab-button').eq(i).on('click',function(){
        $('.tab-button').removeClass("orange")
        $('.tab-button').eq(i).addClass('orange')
    
        $('.tab-content').removeClass("show")
        $('.tab-content').eq(i).addClass('show')
    });
}

 

다음 코드를 보면 for문 안의 이벤트리스너를 만난다.

하지만 바로 실행하지 않고 일단 for문을 반복함 

이렇게 for을 완료후 내부 코드를 실행하는데 이때 var 선언시 i 는 이미 3이 되어있음 그래서 변수 i에 3이 할당되어 오류가 나는것임

=> for문 바깥에 생성 

반면에 let 으로 선언시 for 내부에 각각 변수가 선언되어 각 코드에 0,1,2가 선언되어 올바르게 작동함