JavaScript / for, while, do...while 반복문 사용법과 차이

while과 for는 본문 실행 전에 조건을 검사하므로 처음부터 조건이 거짓이면 0회 실행합니다. do...while은 본문 뒤에 조건을 검사해 최소 1회 실행합니다. 반복 횟수나 인덱스가 명확하다면 for, 종료 조건을 중심으로 읽는 코드라면 while이 자연스러울 수 있습니다.

세 반복문의 검사 시점

반복문을 고를 때는 문법 길이보다 조건과 종료 시점을 드러내는 방식이 중요합니다. 세 방법 모두 종료 조건이나 break가 없으면 끝나지 않을 수 있습니다. 작은 예제를 먼저 실행해 횟수 경계를 확인하세요.

while과 do...while의 차이

while은 매번 조건을 먼저 검사합니다. 조건을 거짓으로 바꾸는 과정이 본문 안에 있어야 하므로 아래에서는 i++가 빠지면 종료하지 않습니다. do...while은 본문을 한 번 실행한 뒤 검사합니다. 마지막 while (조건);의 세미콜론까지 적는 문법입니다.

let i = 0;
while (i < 3) {
  console.log(i); // 0, 1, 2를 차례로 출력
  i++;
}

let j = 0;
do {
  console.log(j); // 0, 1, 2를 차례로 출력
  j++;
} while (j < 3);

이 예제에서는 결과가 같지만 시작 조건이 거짓이면 다릅니다. while (false)의 본문은 실행되지 않고 do { ... } while (false)의 본문은 한 번 실행됩니다. 실제 코드에서는 첫 작업을 반드시 해야 하는지로 선택하세요. MDN의 while 문서와 MDN의 do...while 문서를 참고할 수 있습니다.

for의 초기화·조건·갱신 순서

for (초기화; 조건; 갱신)은 초기화를 한 번 실행한 뒤 조건 검사, 본문 실행, 갱신을 반복합니다. 아래 i < 3은 0·1·2를 다루며 세 번 실행합니다. i <= 3이면 3까지 포함해 네 번 실행하므로 배열 길이와 비교할 때 특히 주의하세요.

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

const items = ['A', 'B', 'C'];
for (let index = 0; index < items.length; index++) {
  console.log(items[index]); // A, B, C
}

let으로 선언한 인덱스는 이 반복문 블록의 범위에서 사용합니다. 배열 값 자체만 필요하면 for...of도 읽기 쉽습니다. for...in은 속성 이름을 열거하므로 배열 값 순회와 혼동하지 마세요. MDN의 for 문서에 실행 순서가 나옵니다.

전체 예제: 0과 3에서 직접 비교하기

아래 코드를 UTF-8로 loop-compare.html에 저장해 브라우저에서 엽니다. 입력한 수 미만의 인덱스를 세 방법으로 배열에 모아 출력합니다. 브라우저를 오래 멈추게 할 수 있는 큰 수를 피하려고 입력은 0~20의 정수로 제한합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>반복문 실행 횟수 비교</title>
</head>
<body>
<label for="count">반복 횟수 기준(0~20)</label>
<input id="count" type="text" value="3">
<button id="run" type="button">비교</button>
<button id="reset" type="button">처음으로</button>
<pre id="output" aria-live="polite"></pre>
<script>
const countInput = document.querySelector('#count');
const output = document.querySelector('#output');

function compare() {
  const raw = countInput.value.trim();
  const count = Number(raw);
  if (raw === '' || !Number.isInteger(count) || count < 0 || count > 20) {
    output.textContent = '0~20 사이의 정수를 입력하세요.';
    return;
  }

  const whileValues = [];
  let i = 0;
  while (i < count) {
    whileValues.push(i);
    i++;
  }

  const doValues = [];
  let j = 0;
  do {
    doValues.push(j);
    j++;
  } while (j < count);

  const forValues = [];
  for (let k = 0; k < count; k++) {
    forValues.push(k);
  }
  output.textContent = [
    `while: ${JSON.stringify(whileValues)}`,
    `do...while: ${JSON.stringify(doValues)}`,
    `for: ${JSON.stringify(forValues)}`,
  ].join('\n');
}

document.querySelector('#run').addEventListener('click', compare);
document.querySelector('#reset').addEventListener('click', () => {
  countInput.value = '3';
  compare();
});
compare();
</script>
</body>
</html>

초기값 3에서는 세 줄 모두 [0,1,2]입니다. 0을 넣으면 while과 for는 빈 배열, do...while은 [0]입니다. 빈 값이나 범위 밖 수에는 안내가 나오며 ‘처음으로’를 누르면 3으로 복원됩니다. 이 결과는 세 반복문의 조건 검사 시점을 그대로 보여 줍니다.

break, continue와 종료 오류

break는 반복문을 즉시 끝냅니다. continue는 현재 본문의 나머지를 건너뛰고 다음 반복으로 갑니다. for에서는 갱신식을 거쳐 다시 조건을 검사하지만 while에서는 조건 검사로 돌아가므로, continue 뒤에 갱신 코드를 놓으면 그 코드가 실행되지 않을 수 있습니다.

for (let i = 0; i < 5; i++) {
  if (i === 1) continue;
  if (i === 4) break;
  console.log(i); // 0, 2, 3
}

while (condition);이나 for (...); 뒤의 잘못된 세미콜론은 빈 본문을 반복시키기도 합니다. 반복 조건과 갱신이 언제 실행되는지, 배열을 다룰 때 인덱스가 length - 1을 넘지 않는지 확인하세요. 탭이 응답하지 않는다면 닫고 조건·갱신 코드를 고친 뒤 다시 실행하세요. MDN의 continue 문서에서 반복문별 이동 위치를 확인할 수 있습니다.