[JS] 반복문 개념 정리 (while, for)

탭 UI를 만들다가 자연스럽게 나온 반복문 개념.
코드가 잘 작동해도 명확하지 않은 부분이 있으면 아는게 아니므로,
생활코딩 반복문 파트를 다시 공부하며 정리했다.

위의 코드에서 내 의문은 이거였다.
반복문의 조건에 의해 i 에 들어가는 숫자가 바뀌면서 내부의 코드가 반복 실행되는 것은 알겠는데..
그럼 어떻게 그 중 클릭하는 버튼의 번호에 해당하는 코드만 실행되는거지?
👀
아.. 모르는걸 정리해서 적다보니 알겠다.
버튼이 3개인 경우,
원래는 .eq(0) .eq(1) .eq(2)를 넣어 여러 묶음의 코드를 만들어놓아야 했으나, 위의 코드로 정리하면 여러 묶음의 코드를 만들어 놓은 것과 똑같이 코드가 생성되니
클릭 이벤트가 발생했을때 실행될 수 있는거구나.ㅎ..

의식의 흐름대로 쓰는 포스트.. 일단 정리는 마저 해보자 ㅋ

🎤 반복문 = loop, iterate

항상 영문 키워드를 잘 알아야 구글링할때 문제가 없다.

🌿 while 반복문

while (조건) {
    반복해서 실행할 코드;
}

조건이 true일때 코드를 실행, 조건이 flase가 되면 실행을 중단한다.
= 조건이 true인 동안 실행한다.

while문이 true 조건을 가지고 무한 반복되지 않도록, 여기에 몇가지 코드를 붙여서 조건에 제한을 둔다.

let i = 0;
while (i < 10){
    반복해서 실행할 코드;
    i = i + 1;
}

1. i 라는 변수(iterate의 약자)를 선언하고,
2. i 가 10보다 작다면 코드를 실행한다.
3. 코드는 반복해서 실행할 코드 를 실행시킨다음,
4. 재할당된 i = i + 1 코드에 의해서 값이 변한다.
5. 그리고 그 변한 값이 조건에 의해 ture로 판단될 때 까지만 반복 실행된다.

while문으로 사용하면 조건 설정을 위한 코드들이 떨어져 있어서 가독성이 떨어지므로 for문을 사용한다.

🌿 for 반복문

for (i = 0; i < 10; i++) {
    반복해서 실행할 코드;
}

while 반복문과 동작원리는 같고, 문법이 다르다.
조건과 관련된 코드가 한번에 정리되므로 가독성이 좋아진다.

i + 1 은 i++로 표현할 수 있다.
i - 1 은 i-- 로 표현.

🍋 반복문의 제어

for (i = 0; i < 5; i++) {
    if (i == 3) {
      break;
    }
    console.log('반복' + i + '/');
}

output = 반복0 / 반복1 / 반복2

반복 작업을 중간에 중단시키기 위한 방법으로 break를 사용한다.
if 문에 들어간 조건이 true가 되면 코드 실행이 중단된다.
= 반복문이 완전히 종료된다.

for (i = 0; i < 5; i++) {
    if (i == 3) {
      continue;
    }
    console.log('반복' + i + '/');
}

output = 반복0 / 반복1 / 반복2 / 반복4

반면에 continue 를 사용하면 if 문의 조건이 true가 되었을때 코드실행을 중단한 다음, 다시 반복문으로 돌아가 나머지 작업을 수행한다.

🍋 반복문의 중첩

반복문 안에는 또 다른 반복문이 들어갈 수 있다.

for (i = 0; i < 3; i++) {
    for (j = 0; j < 3; j++) {
      console.log('반복' + i + j + '/');
    }
}

output = 반복00 / 반복01 / 반복02 / 반복10 / 반복11 / 반복12 / 반복20 / 반복21 / 반복22

첫번째 반복문이 실행된 다음,
두번째 반복문의 조건이 flase가 될때까지 실행된 다음,
다시 첫번째 반복문이 실행되고, 두번째 반복문이 다시 false가 될때까지 실행되는 방식.

반복문은 array와 함께 사용할때 빛을 발한다고 한다.
일단은 기본만 정리하는걸로!