IT 강좌 JavaScript 기초 042_반복문 while、for

반복문은 코드 블록을 반복적으로 실행하는 데 사용되는 방법입니다. JavaScript는 while, do-while, for 등 다양한 유형의 반복문을 제공합니다. 완전한 반복문은 초기화 표현식, 반복 조건, 반복자를 포함합니다.

`while` 반복문

while 반복문은 조건이 true인 경우 코드 블록을 반복적으로 실행하는 데 사용됩니다. 반복문 본문의 단일 실행을 한 번의 반복이라고 합니다. 모든 표현식이나 변수는 반복 조건이 될 수 있으며, 반복 조건은 계산되고 그 결과는 부울 값으로 변환됩니다. if와 마찬가지로 반복문 본문에 문장이 하나만 있는 경우 중괄호 {…}를 생략할 수 있지만 권장하지 않습니다. 각 반복 전에 조건을 확인합니다.

예제:

1
let i = 0; // 초기화 표현식, 일반적으로 카운터 변수를 선언하는 데 사용되며, 없으면 undefined 오류가 발생합니다
2
while (i < 5) { // 반복 조건, `true`이면 반복문이 계속 실행됩니다
3
  console.log(i);
4
  i++; // 반복자, 일반적으로 카운터 변수를 업데이트하여 반복 조건과 일치시키는 데 사용됩니다
5
}

무한 반복 예제:

1
let i = 0;
2
  while (1) { // 조건이 항상 true이면 무한 반복에 들어갑니다
3
    console.log(i);
4
    i++; // 일반적으로 이 형식의 카운터를 사용하여 반복 조건을 업데이트합니다
5
    if (i >= 5) break;  // 주석 처리하면 무한 반복 모드로 진입합니다
6
}

`do-while` 반복문

do-while 반복문은 while 반복문과 유사하지만, 먼저 반복문 본문을 한 번 실행한 다음 조건이 true인지 확인합니다. 조건이 참이면 반복문 본문을 계속 실행합니다. 사용 시나리오에 주의해야 합니다. 조건의 참/거짓 여부와 관계없이 반복문 본문을 최소 한 번 실행해야 하는 경우에만 do-while을 사용하고, 다른 시나리오에서는 while 반복문을 권장합니다. 각 반복 후에 조건을 확인합니다.

예제:

1
let i = 0;
2
do {
3
  console.log(i);
4
  i++;
5
} while (i < 5);

`for` 반복문

for 반복문은 더 복잡하지만 가장 일반적으로 사용되는 반복 구조로, 코드 블록을 반복적으로 실행하는 데 사용됩니다. for 반복문은 초기화 표현식, 반복 조건, 반복자의 세 부분을 포함합니다. 다음은 for 반복문의 기본 구문입니다: 각 반복 전에 조건을 확인하며, 다른 설정을 사용할 수 있습니다.

예제:

1
for (let i = 0; i < 5; i++) {
2
  console.log(i);
3
}

무한 반복 예제:

1
let i = 0;
2
  for ( ; ; ) { // 모든 조건을 생략하면 무한 반복에 들어갑니다
3
    console.log(i);
4
    i++; // 일반적으로 이 형식의 카운터를 사용하여 반복 조건을 업데이트합니다
5
  if (i >= 5) break;  // 주석 처리하면 무한 반복 모드로 진입합니다
6
}

문장 구간 생략

for 반복문은 초기화 표현식, 반복 조건 또는 반복자 중 하나 이상을 생략할 수 있지만, 세미콜론 ;은 반드시 유지해야 합니다. 세미콜론은 각 부분을 구분하는 데 사용되며, 한 부분을 생략하더라도 해당 세미콜론은 유지해야 합니다.

예제:

1
let x = 0;
2
for (; x < 5; x++) {
3
  console.log(x);
4
}
5
// 초기화 표현식을 생략하고 반복문 외부로 이동하면 반복문은 여전히 유효합니다
6

7
let y = 0;
8
for (;; y++) {
9
  if (y >= 5) {
10
    break;
11
  }
12
  console.log(y);
13
}
14
// 반복 조건을 생략하고 `if` 문과 `break`를 통해 반복문을 종료합니다
15

16
let z = 0;
17
for (; z < 5;) {
18
  console.log(z);
19
  z++;
20
}
21
// 반복자를 생략하고 반복문 본문 내부로 이동하면 반복문은 여전히 유효합니다

중첩 반복문

중첩 반복문은 한 반복문 본문 내부에 다른 완전한 반복 구조를 포함하는 것을 의미합니다. 중첩 반복문은 외부 반복문이 실행될 때마다 내부 반복문을 한 번 실행합니다.

정삼각형 예제:

1
// 예제 A
2
for (let i = 1; i <= 5; i++) { // 외부 반복문, 행 수를 제어하며 1부터 5까지입니다.
3
  let row = ''; // 외부 반복문이 실행될 때마다 빈 문자열 `row`를 생성하여 현재 행의 별을 저장합니다.
4
  for (let j = 1; j <= i; j++) { // 내부 반복문, 각 행의 별 개수를 제어하며 1부터 현재 행 수 `i`까지입니다.
5
    row += '⭐ '; // 별을 `row`에 추가하여 현재 행의 별 문자열을 형성합니다.
6
  }
7
  console.log(row); // 현재 행의 별 문자열을 출력합니다.
8
}

1
// 예제 B
2
for (let i = 1; i <= 5; i++) { // 외부 반복문은 행 수를 나타냅니다
3
    for (let j = 1; j <= i; j++) { // 내부 반복문은 열을 나타냅니다
4
        document.write('⭐'); // 별을 그래픽 요소로 사용합니다
5
    }
6
    document.write('</br>'); // 줄바꿈
7
}

역삼각형 예제:

1
// 예제 A
2
for (let i = 5; i >= 1; i--) { // 외부 반복문, 행 수를 제어하며 1부터 5까지입니다.
3
  let row = ''; // 외부 반복문이 실행될 때마다 빈 문자열 `row`를 생성하여 현재 행의 별을 저장합니다.
4
  for (let j = 1; j <= i; j++) { // 내부 반복문, 각 행의 별 개수를 제어하며 1부터 현재 행 수 `i`까지입니다.
5
    row += '* ';  // 별을 `row`에 추가하여 현재 행의 별 문자열을 형성합니다.
6
  }
7
  console.log(row);  // 현재 행의 별 문자열을 출력합니다.
8
}

1
// 예제 B
2
for (let i = 1; i <= 5; i++) { // 외부 반복문은 행 수를 나타냅니다
3
    for (let j = 0; j <= 5 - i; j++) { // 내부 반복문은 열을 나타냅니다
4
        document.write('⭐'); // 별을 그래픽 요소로 사용합니다
5
    }
6
    document.write('</br>'); // 줄바꿈
7
}

`break` 반복문 종료(끝내기, 빠져나가기)

break는 현재 반복문 또는 switch 문을 종료(끝내기, 빠져나가기)하는 데 사용됩니다. break가 없으면 후속 case가 계속 실행됩니다(즉, “관통” 현상이 발생합니다).

“무한 반복 + break” 조합은 반복문 시작/종료 시 조건을 확인할 필요가 없지만, 중간이나 본문의 여러 위치에서 조건을 확인해야 하는 상황에 적합합니다.

예제:

1
let count = 0;
2
while (true) {
3
  console.log("반복 중...");
4
  // 특정 조건을 시뮬레이션하고, 조건이 충족되면 반복문을 빠져나갑니다
5
  if (count === 5) {
6
    console.log("조건 충족, 반복문 빠져나가기");
7
    break;
8
  }
9
  count++;
10
}

`continue` 다음 반복 계속(건너뛰기)

continue는 반복문에서 현재 반복을 조기에 종료하고 다음 반복을 계속하는 데 사용됩니다. continue는 break의 “가벼운 버전”입니다. 전체 반복문을 중지하지 않습니다. 대신 현재 반복을 중지하고 새로운 반복을 강제로 시작합니다(조건이 허용하는 경우).

예제:

1
for (let i = 0; i < 8; i++) {
2
    if (i % 2 === 0) {
3
        continue; // i를 2로 나눈 나머지가 0일 때 현재 반복을 건너뛰고 다음 반복을 계속합니다
4
    }
5
    console.log(i);
6
}

while 반복문

do-while 반복문

for 반복문