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

좋은 관습 : 반복적인 셀렉터는 변수에 넣어서 쓰기

let 버튼 = $('.tab-button');

셀렉터 문법은 기본적으로 작동시간이 오래 걸리기 때문에 반복되면 변수에 집어넣기!

코드를 복붙하고싶으면 for 반복문

탭기능을 보면 비슷한 코드 덩어리 6줄이 3번 반복
비슷한 코드를 발견하면 for 반복문으로 쉽게 복붙이 가능해용

for (횟수){
  복붙할 코드
}

이런식으로

for (let i = 0; i < 5; i++) {
  console.log('안녕')
}

-> 안녕을 5번 반복해서 출력해주세요~

for 반복문으로 탭기능 코드 줄여보기

<script>
for(let i = 0; i < 3; i++) {
 버튼.eq(i).on('click', function(){
 버튼.removeClass("orange");
 버튼.eq(i).addClass("orange");
 내용.removeClass("show");
 내용.eq(i).addClass("show");
});
}
</script>

숫자가 늘어나는 자리에 i라는 변수를 넣어주면 해결 가능

for반복문에서 반복변수 선언 시 var이 작동 안되는 이유

컴퓨터의 입장이 되어 탭기능 코드를 읽어본다면

0. 컴퓨터는 위에서부터 한줄한줄 코드를 해석한다.
1. for 반복문을 발견하여 안에 있는 코드를 반복실행하려고 한다.
2. 이벤트리스너를 만난다. 하지만 바로 실행되지 않는다. 이유는 사용자가 버튼을 아직 누르지 않았기 때문이다.
   그래서 이벤트리스너 내의 4줄 코드는 아직 실행하지 않고 지나간다.
   이런식으로 반복문 안의 코드를 3번 실행한다.
3. 반복문이 끝나고 나서 var의 변수는 3이 되어있다.
4. 반복분이 다 돌고난 후 사용자가 버튼0을 클릭한다. 이때 컴퓨터는 이벤트리스너 안의 코드 4줄을 실행시킨다.
5. 근데 i라는 변수를 발견한다.
   컴퓨터는 변수를 발견하면 근처에서 변수를 찾아 채우려는 습성이 있다.
   주변을 살펴보니 반복문을 다 돌고난 var i 라는 변수가 3이 되어있는걸 발견! 이거 사용해야지~
6. 하지만 "버튼.eq(3)" 은 존재하지 않다. (4번버튼 XX)
7. 따라서 작동이 안된다.

근데 let이라는 변수를 사용하면 변수 포스트잇이 for 바깥이 아닌 안에 생성!

var i = 0
-var변수는 범위가 function
-var i 가 들어있는 포스트잇은 for문 바깥에 생성

let i = 0
-let변수는 범위가 {}
-let i 가 들어있는 포스트잇은 for 안쪽에 3개 생성

확장성있는 코드로 바꿔보기

좋은코드란?
1. 원하는 기능이 잘 구현되어있는가
2. 확장성이 좋은가
3. 나중에 관리가 쉬운가
4. 성능에 문제가 없는가

<script>
for(let i = 0; i < $('.tab-button').length; i++) {
 버튼.eq(i).on('click', function(){
 버튼.removeClass("orange");
 버튼.eq(i).addClass("orange");
 내용.removeClass("show");
 내용.eq(i).addClass("show");
});
}
</script>

반복횟수에 제한이 있어서 확장성에 문제가 있었으니 버튼의 갯수대로 반복하게 만들어주면 해결