자바스크립트 while 반복문: do...while, break, continue 완벽 정리

몇 번 반복해야 할지 모를 때 쓰는 반복문

for 문은 반복 횟수가 정해져 있을 때 빛을 발합니다. "10번 실행해라", "이 배열의 모든 인덱스를 훑어라" 같은 경우죠. 반면 자바스크립트 while 문은 정반대 상황을 위한 도구입니다. 어떤 조건이 바뀔 때까지 계속 돌려라 하는 식이죠. 몇 번 돌지는 알 수 없고, 언제 멈출지만 알고 있을 때 씁니다.

문법은 아주 단순합니다:

자바스크립트는 괄호 안의 조건을 먼저 평가합니다. 결과가 참(truthy)이면 블록을 실행하고, 다시 조건을 확인하고, 또 실행하고… 이 과정을 조건이 거짓(falsy)이 될 때까지 반복하죠. 만약 count++를 빼먹으면 조건이 영원히 바뀌지 않아서 — 네, 바로 무한루프에 빠집니다.

동작 원리: 확인하고, 실행하고, 반복하기

while 문이 제대로 동작하려면 다음 세 가지 조건이 모두 갖춰져야 합니다.

1. 조건이 참조하는 어떤 값이 존재해야 한다.
2. 반복문 본문에서 그 값을 바꿀 수 있어야 한다.
3. 언젠가는 조건이 false가 되어야 한다.

이 중 하나라도 빠지면 문제가 생깁니다. 가장 흔한 실수가 바로 2번을 놓치는 경우예요.

let count = 0;

while (count < 5) {
    console.log(count);
    // count 증가를 잊음 — 무한 루프
}

프로세스를 강제로 종료하기 전까지 멈추지 않고 돌아갑니다. 서버에서 이런 일이 터지면 피해가 꽤 큽니다. 그래서 while 문을 쓸 때는 항상 스스로에게 물어봐야 합니다. 반복문 안에서 어떤 코드가 조건을 false로 만들어 줄까?

실전 예시: 끝을 알 수 없을 때

while 문이 for 문보다 빛을 발하는 순간이 바로 여기입니다. 어디선가 항목을 하나씩 꺼내 쓰는데, 다 비우기 전까지는 몇 개가 남아 있는지 알 수 없는 상황이죠:

shift()는 배열의 첫 번째 요소를 꺼내서 반환합니다. 큐에 뭔가 남아 있는 동안 루프가 돌고, 비면 자연스럽게 빠져나오죠. 물론 for 문으로도 작성할 수 있지만, 그건 문제의 본질과는 어긋나는 방식입니다. 이런 경우엔 while 문이 의도를 훨씬 잘 드러냅니다.

do...while: 일단 실행하고 조건은 나중에

do...while 문은 순서를 뒤집습니다. 먼저 본문을 실행하고, 그다음에 조건을 검사하죠. 덕분에 최소 한 번은 반드시 실행된다는 게 보장됩니다:

조건이 처음부터 거짓이어도 본문은 무조건 한 번은 실행됩니다. 이건 조건이 거짓이면 아예 한 번도 돌지 않는 일반 while 문과 정반대죠.

대표적인 예로, 사용자에게 입력을 받고 값을 검증한 다음 잘못되면 다시 물어보는 상황이 있습니다. 어차피 최소 한 번은 물어봐야 하니까 do...while이 딱 맞습니다.

한 가지 주의할 점은 닫는 ) 뒤에 세미콜론이 붙는다는 겁니다. while이나 for와 달리 do...while에서는 세미콜론이 꼭 필요해요.

break: 반복문을 즉시 빠져나오기

break는 가장 가까운 반복문을 그 자리에서 종료시킵니다. 기본 조건만으로는 원하는 시점에 루프를 멈추기 어려울 때 쓰는 방법이죠.

break가 실행되는 순간 루프는 끝입니다. 남아있는 본문도, 다음 조건 검사도 모두 건너뛰고 바로 빠져나오죠.

while (true)와 break 조합

종료 조건을 헤더에 깔끔하게 쓰기 애매할 때는 구조를 뒤집어 보세요. 일단 무한 루프로 돌리다가 끝낼 타이밍에 break로 탈출하는 방식입니다.

탈출구는 두 가지입니다. 정상 종료와 안전장치(safety cap)죠. 이 안전장치가 핵심입니다. break로 빠져나갈 경로가 보장되지 않은 while (true)는 언제 터질지 모르는 자바스크립트 무한루프 시한폭탄이나 다름없습니다.

continue: 다음 반복으로 건너뛰기

continue는 현재 반복의 남은 본문을 건너뛰고 곧바로 다음 조건 검사로 점프합니다:

한 가지 주의할 점: 반복을 앞으로 진행시키는 코드가 continue 뒤에 있으면, 그 순간 무한루프가 완성됩니다. 위 예제에서는 n++이 continue보다 앞에 있어서 문제가 없죠. 만약 뒤로 옮긴다면 n은 짝수에서 영원히 멈춰버립니다.

while vs for: 언제 뭘 써야 할까

기계적으로 판단할 때 쓸 만한 기준:

• 정해진 범위를 세거나 인덱스로 접근 → for. for (let i = 0; i < arr.length; i++) 한 줄에 초기화, 조건, 증감이 모두 담깁니다.
• 컬렉션 순회 → for...of. 인덱스를 직접 관리하지 않아 훨씬 깔끔합니다.
• 어떤 상태가 바뀔 때까지 반복 → while. 큐 처리, 폴링, 스트림 소비, 성공할 때까지 재시도하는 상황에 잘 맞습니다.
• 최소 한 번은 실행되어야 함 → do...while.

이론상으로는 서로 바꿔 쓸 수 있습니다. 어떤 for든 while로 바꿀 수 있고 그 반대도 마찬가지죠. 그래도 문제의 모양에 맞는 반복문을 고르면 코드 자체가 의도를 설명해 줍니다.

무한루프, 딱 한 가지 규칙

모든 while 문은 언제 멈추는가? 라는 질문에 명확히 답할 수 있어야 합니다.

헤더의 조건이 언젠가 false가 되거나, 아니면 반드시 실행되는 break가 있거나 둘 중 하나죠. 이 두 가지 중 하나도 짚어낼 수 없다면, 그 반복문은 아직 완성된 게 아닙니다.

// 나쁨: 조건이 절대 바뀌지 않음
let ready = false;
while (!ready) {
    console.log("대기 중...");
    // 여기서 `ready`를 바꾸는 것이 없음
}

// 좋음: 본문이 조건에 영향을 줌
let ready = false;
let checks = 0;
while (!ready) {
    checks++;
    if (checks >= 3) ready = true;
}

브라우저에서 무한루프가 돌면 탭이 그대로 멈춰버리고, Node 환경에서는 프로세스를 강제로 죽일 때까지 CPU 코어 하나를 100%로 잡아먹습니다. 배포 전에 꼭 잡아내야 할 버그죠.

다음 주제: for...of와 for...in

while 문은 "어떤 조건이 바뀔 때까지 반복"하는 상황에 잘 어울립니다. 반면에 배열, 문자열, 객체를 요소 하나하나 훑어야 할 때는 자바스크립트에 딱 맞게 준비된 반복문이 따로 있습니다. 바로 다음에 살펴볼 for...of와 for...in입니다.