자바스크립트에서 반복문을 작성하다 보면 특정 조건에서 루프를 강제로 종료하거나, 일부 반복만 건너뛰어야 하는 경우가 자주 발생합니다. 이럴 때 사용하는 것이 break, continue, 그리고 레이블(label) 문입니다. 이 글에서는 세 가지 문의 동작 원리와 실전 예제, 실행 결과까지 살펴보며 반복문 흐름 제어 방법을 자세히 알아보겠습니다.
1. break 문
break 문은 루프를 조기에 종료하여 해당 루프를 감싸고 있는 중괄호 블록 밖으로 즉시 빠져나가는 역할을 합니다. 즉, break 문을 만나는 순간 남은 반복은 모두 무시되고 루프가 완전히 종료됩니다.
다음 예제는 while 루프에서 break 문을 사용하는 모습을 보여줍니다. 변수 x가 5에 도달하는 순간 루프가 조기에 종료되어, 닫는 중괄호 바로 아래의 document.write(...) 문으로 제어가 넘어가는 것을 확인할 수 있습니다.
예제
<html>
<body>
<script>
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 20) {
if (x == 5) {
break; // 루프를 완전히 빠져나감
}
x = x + 1;
document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
</script>
</body>
</html>
실행 결과
Entering the loop 2 3 4 5 Exiting the loop!
참고: 최신 자바스크립트 개발 환경에서는 document.write() 대신 console.log()를 사용하는 것이 권장됩니다. 동작 원리는 동일합니다.
2. continue 문
continue 문은 현재 반복의 나머지 코드를 건너뛰고 즉시 다음 반복을 시작하도록 인터프리터에 지시합니다. continue 문을 만나면 프로그램 흐름은 곧바로 루프의 조건 검사식으로 이동하며, 조건이 여전히 참이면 다음 반복을 시작하고, 거짓이면 루프를 완전히 벗어납니다.
즉, break 문이 루프 전체를 종료한다면, continue 문은 한 번의 반복(iteration)만 건너뜁니다. 다음 예제는 while 루프에서 continue 문을 사용하는 방법을 보여줍니다. 변수 x가 8에 도달했을 때 해당 숫자의 출력이 건너뛰어지는 것에 주목하세요.
예제
<html>
<body>
<script>
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 10) {
x = x + 1;
if (x == 8) {
continue; // 루프 본문의 나머지 부분을 건너뜀
}
document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
</script>
</body>
</html>
실행 결과
Entering the loop 2 3 4 5 6 7 9 10 Exiting the loop!
x가 8일 때 continue 문에 의해 출력이 건너뛰어지고, 루프는 끝까지 정상적으로 진행됩니다.
3. 레이블(label) 문
자바스크립트의 레이블 문은 식별자 앞에 이름표(레이블)를 붙이는 구문입니다. 레이블은 콜론(:)이 뒤따르는 단순한 식별자로, 특정 문장이나 코드 블록에 적용됩니다. 레이블을 break 또는 continue 문과 함께 사용하면 어떤 루프를 대상으로 흐름을 제어할지 명확하게 지정할 수 있습니다.
특히 루프가 중첩된 상황에서 안쪽 루프뿐 아니라 바깥쪽 루프까지 한 번에 빠져나가야 할 때 레이블이 매우 유용합니다. 다음 예제를 통해 break 문과 함께 레이블을 사용해 흐름을 제어하는 방법을 확인해 보세요.
예제
<html>
<body>
<script>
document.write("Entering the loop!<br /> ");
outerloop: // 레이블 이름
for (var i = 0; i < 5; i++) {
document.write("Outerloop: " + i + "<br />");
innerloop:
for (var j = 0; j < 5; j++) {
if (j > 3 ) break ; // 가장 안쪽 루프 종료
if (i == 2) break innerloop; // innerloop 레이블의 루프 종료
if (i == 4) break outerloop; // outerloop 레이블의 외부 루프 종료
document.write("Innerloop: " + j + " <br />");
}
}
document.write("Exiting the loop!<br /> ");
</script>
</body>
</html>
실행 결과
Entering the loop! Outerloop: 0 Innerloop: 0 Innerloop: 1 Innerloop: 2 Innerloop: 3 Outerloop: 1 Innerloop: 0 Innerloop: 1 Innerloop: 2 Innerloop: 3 Outerloop: 2 Outerloop: 3 Innerloop: 0 Innerloop: 1 Innerloop: 2 Innerloop: 3 Outerloop: 4 Exiting the loop!
i가 2일 때는 break innerloop에 의해 안쪽 루프가 즉시 종료되어 Innerloop 출력이 없고, i가 4가 되는 순간 break outerloop가 실행되어 외부 루프까지 한 번에 빠져나오는 것을 확인할 수 있습니다.
마무리
정리하면 break는 루프를 완전히 종료하고, continue는 현재 반복만 건너뛰며, 레이블은 중첩된 루프에서 종료할 대상 루프를 직접 지정할 수 있게 해줍니다. 세 가지를 상황에 맞게 활용하면 복잡한 반복 로직도 훨씬 깔끔하고 효율적으로 작성할 수 있습니다.