javascript기초(for 반복문)

for 문은 조건식이 거짓으로 평가될 때까지 코드 블록을 반복 실행한다.

 

for(변수 선언문 또는 할당문; 조건식; 증감식){
  조건식이 참인 경우 반복 실행될 문;
}

for(var i = 0; i < 2; i++){
	console.log(i);
}

// var i 가 2보다 커지기 전까지, i를 증감

 

위의 결과 값은 0과 1이 출력된다.(2보다 작은수)

for 문의 변수 선언문의 변수 이름은 반복을 의미하는 interation의 i를 사용하는것이 일반적이다.

 

순서는 다음과 같다.

1.  for 문을 실행하면 맨 먼저 변수 선언문 var i = 0이 실행된다. 변수 선언문은 단 한번만 실행된다.

2. 변수 선언문의 실행이 종료되면 조건식이 실행, 현재 i 변수의 값은 0이므로 조건식의 평가 결과는 true.

3. 조건식의 평가 결과가 true 이므로 코드 블록이 실행된다. 이때 증감문으로 실행 흐름이 이동하는 것이 아닌

     코드 블록으로 실행 흐름이 이동한다.(console.log(i);)

4. 코드 블록의 실행이 종료되면 증감식 i++가 실행되어 i 변수의 값은 1이된다.

5. 증감식이 종료되면 다시 조건식이 실행되고 코드 블록의 실행이 종료되면 i 변수는 2가 된다.

6. 증감식 실행이 종료되면 다시 조건식이 실행 - > 현재 i의 변수 값은 2이므로 조건식의 평가 결과는 false, 따라서 for문의 실행이 종료.

 

---

 

for 문 내에 for 문을 중첩해 사용할 수 있다.

for (var i = 1; i <= 6; i++) {
 for (var j = 1; j <= 6; j++){
 	if (i + j === 6) console.log(`[${i}, ${j}]`);
 }
}

 

위의 코드는 6이 되는 모든 경우의 수를 출력해주는 코드.

 

**for 문의 변수 선언문,조건식,증감식은 모두 옵션이므로 반드시 사용할 필요는 없지만 어떤 식도 선언하지 않으면 무한루프가 된다.

---

응용) for 문을 이용한 tab버튼 만들기

 

<style>
        ul.list {
          list-style-type: none;
          margin: 0;
          padding: 0;
          border-bottom: 1px solid #ccc;
        }
        ul.list::after {
          content: '';
          display: block;
          clear: both;
        }
        .tab-button {
          display: block;
          padding: 10px 20px 10px 20px;
          float: left;
          margin-right: -1px;
          margin-bottom: -1px;
          color: grey;
          text-decoration: none;
          cursor: pointer;
        }
        .orange {
          border-top: 2px solid orange;
          border-right: 1px solid #ccc;
          border-bottom: 1px solid white;
          border-left: 1px solid #ccc;
          color: black;
          margin-top: -2px;
        }
        .tab-content {
          display: none;
          padding: 10px;
        }
        .show {
          display: block;
        }
      </style>


<div class="container mt-5">
        <ul class="list">
          <li class="tab-button">Products</li>
          <li class="tab-button orange">Information</li>
          <li class="tab-button">Shipping</li>
        </ul>
        <div class="tab-content">
          <p>상품설명입니다. Product</p>
        </div>
        <div class="tab-content show">
          <p>스펙설명입니다. Information</p>
        </div>
        <div class="tab-content">
          <p>배송정보입니다. Shipping</p>
        </div>
 </div>

각 버튼을 눌렀을때 오렌지선 박스가 옮겨가게끔 코드를 작성해 보자.

 

$('.tab-button').eq(0).on('click', function(){
  $('.tab-button').removeClass('orange');
  $('.tab-button').eq(0).addClass('orange');
  $('.tab-content').removeClass('show');
  $('.tab-content').eq(0).addClass('show');
})

 

위 코드와 같이 버튼을 눌렀을때 클래스를 땟다 붙히면서 해당 기능을 구현할수 있지만

각 버튼마다 위 코드를 숫자를 바꿔 여러개 만들어야 한다.

이때 for문을 이용하면 좀더 간단히 할수있다.

 

for (var 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');
  })

});

 

이렇게 작성하면 위 코드는 제대로 실행되지 않는다

이유는 변수 i 를 선언할때 var를 썼기 때문인데, 기본적으로 컴퓨터는 위에서부터 한줄한줄 코드를 해석한다.

위코드의 실행 순서를 보면

 

1. for 반복문을 발견해서 안에있는 코드를 해석한다.

2. 이벤트리스너를 만나는데 이벤트리스너 안의 코드는 바로 실행이 안된다.(사용자가 버튼을 클릭시 실행되는 코드이기 때문)

3. 따라서 이벤트리스너 내의 코드는 실행하지 않고 지나간다.

4. 그상태에서 반복문 안의 코드를 3번 실행한다. 이때 i라는 변수를 발견

5. 컴퓨터는 변수를 발견하면 근처에서 변수를 찾아서 채우려는 습성이 있기때문에 반복문을 다 돌고난 var i(3)라는 변수를 쓴다.

6. 하지만 $('.tab-button').eq(3)이라는건 존재하지 않는다(4번 버튼이 없기때문)

7. 따라서 에러를 낸다.

 

하지만 여기서 var 대신 let을 쓰면 잘 실행된다. 이유는

for 안에서 var i = 0 을 쓰면 var 변수의 범위는 function이다. 따라서 var i 는 for 문 바깥에 생성된다.

 

for 안에서 let i = 0 을 쓰면 let 변수는 범위가 { } 이기때문에 let i 는 for 안쪽에 생성된다.

그리고 컴퓨터는 가까운 변수를 쓰려고 하기때문에 let을 쓰면 잘 동작하게 된다.

 

 

function 탭열기(숫자){
    $('.tab-button').removeClass('orange');
    $('.tab-button').eq(숫자).addClass('orange');
    $('.tab-content').removeClass('show');
    $('.tab-content').eq(숫자).addClass('show');
}


var 버튼 = $('.tab-button').length

for(let i = 0; i < 버튼 ; i++){

$('.tab-button').eq(i).on('click',function(){
    탭열기(i);
});
}

 

 

좀더 확장성 있게 코드를 구성하기 위해 (버튼이 늘어나도 코드가 잘 실행되기 위해)

변수에 버튼의 개수(.length)를 담아 코드를 구성하였다.

 

**jquery에서 인덱싱 하는법 = eq()