쫌만알자! (12) - 자바스크립트 제어문(2) - 반복문

반복문은 조건식의 평가결과가 참일 때 코드 블록을 실행합니다. 그리고 조건이 또 참일 때 코드 블록을 다시 실행합니다. 조건식이 false가 될 때까지 반복하기 때문에 반복문이라고 칭합니다.

자바스크립트에는 for, while, do...while 이렇게 3가지 반복문이 있습니다.

while문

while문은 주어진 조건식의 평가 결과가 true이면 코드 블록을 계속해서 반복해서 실행합니다.

let counter = 0;

while(counter < 5) {
  console.log(counter) // 0 1 2 3 4

  counter = counter + 1;
}

위 코드에서는 counter가 5 미만일 때까지 실행됩니다. 따라서 콘솔에 찍히는 값은 차례대로 0, 1, 2, 3, 4가 됩니다.

무한 루프

반복문을 다룰 때에는 주의해야 하는 게 있습니다. 바로 무한 루프입니다.

무한 루프란 이름 그대로 무한하게 반복하는 문을 의미합니다.

while(true) {
  console.log('Looooooop!')
}

조건식이 언제나 true인 반복문입니다.

위 코드는 실행시키지 않는 것이 좋습니다. 프로그램을 강제 종료하지 않는 이상 영원히 실행되거든요.

무한 루프는 프로그램의 원활한 실행을 방해합니다. 따라서 if문 등으로 무한 루프를 탈출할 수 있게 해야합니다.

let counter = 0;

while(true) {
  console.log(counter);
  counter = counter + 1;

  if(counter === 5) {
    break;
  }
}

if문과 break의 조합으로 이제 무한 루프를 탈출할 수 있게 되었습니다.

do...while문

do...while 문은 코드블록을 일단 먼저 실행하고 그 후에 조건식을 평가합니다.

let counter = 0;

do {
  console.log(counter);
  counter = counter + 1;
} while(counter < 5)

코드 블록이 while 다음에 있지 않고 do 다음에 위치하죠? do에 있는 블록은 조건문과 상관없이 먼저 실행됩니다.

조건식에 부합하지 않더라도 최소 한번은 실행되는 조건문입니다.

for문

for문은 while문의 로직을 좀더 기계적으로 운용합니다.

for(변수 선언문 혹은 할당문; 조건식; 증감식) {
  참인경우 실행될 문;
}

보통 프로그래머들은 for 문 사용 시 내부에서 사용할 변수를 i로 선언합니다. i는 반복을 의미하는 iteration입니다.

const arr = ['하나', '둘', '셋'];

for(let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

for문을 이해하기가 처음엔 어려울 수 있습니다. 차근차근히 살펴봅시다.

for문의 동작

const arr = ['하나', '둘', '셋'];

for(let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

// 동작
// step1
i = 0;
i < arr.length --> true // 0 < 3
  console.log(arr[i]) --> arr[0] // 하나

// step2
i++; // i는 1
i < arr.length; --> true // 1 < 3
  console.log(arr[i]) --> arr[1] // 둘

// step3
i++; // i는 2
i < arr.length; --> true // 2 < 3
  console.log(arr[i]) --> arr[2] // 셋

// step4
i++; // i는 3
i < arr.length; --> false // 3 < 3

// for문 종료

for문의 괄호 속 3번째 식은 증감식이기 때문에 이렇게 감소하는 형태로도 작성할 수 있습니다.

for(let i = 2; i >=0; i--) {
  console.log(i); // 2 1 0
}

for문의 무한루프

while 문에서 while(true) 로 작성하면 무한루프가 됩니다.

for문에서는 이렇게 작성합니다.

for(;;) {
  //...
}

for문에서의 변수 선언(할당)문, 조건식, 증감식은 모두 선택적입니다. 따라서 작성하지 않으면 무한루프가 됩니다.

선택적 식 사용

변수를 밖에 선언(및 할당)

let i = 0;

for(; i < 5; i++) {
  //
}

조건식을 따로 작성

for(let i = 0; ; i++) {
  console.log(i); 

  // 조건식
  if(i > 3) {
    break;
  }
}

for문의 중첩

for문 속에 for문을 한번 더 작성할 수 있습니다. 이를 중첩 for문이라 합니다.

for(let i = 1; i <=3; i++) {
  for(let j = 1; j <=3; j++) {
    if(i + j == 3) {
      console.log(`${i} + ${j}는 ${i+j}`)
    }
  }
}

동작은 이렇습니다.

step1
- i = 1;
- i <= 3 --> true
  - j = 1;
  - j <= 3 --> true
    - i + j --> 2 // 실행 조건 미충족
- step 1-2
  - j++ // j는 2
  - j <= 3 --> true
    - i + j --> 3
    - 출력
- step 1-3
  - j++ // j는 3
  - j <= 3 --> true
    - i + j --> 4 // 실행조건 미충족
- step 1-4
  - j++ // j는 4
  - j <= 4 --> false // for문 종료
중첩된 for문 1번 종료
step2
- i++; // i는 2
- i <= 3 --> true
  - j = 1;
  - j <= 3 --> true
    - i + j --> 3
    - 출력
- step 2-2
  - j++ // j는 2
  - j <= 3 --> true
    - i + j --> 4 // 실행조건 미충족
- step 2-3
  - j++ // j는 3
  - j <= 3 --> true
    - i + j --> 5 // 실행조건 미충족
- step 2-4
  - j++ // j는 4
  - j <= 4 --> false // for문 종료

이렇게 바깥의 for문의 각각의 루프 한번마다 중첩된 for문이 끝까지 반복됩니다.

보통 중첩되는 for문의 변수를 선언할 경우에는 i j k l m n 순으로 작성합니다. 일종의 관례입니다.

다음 글에서는 지금까지 몇 번 언급했던 암묵적 타입 변환에 대해 알아보겠습니다.

◾ 자바스크립트 제어문(1) - 조건문 👈 이전 글 보기

Yeony