레이블(Label)이란?
자바스크립트에서 프로그램의 실행 흐름을 더욱 정밀하게 제어하고 싶다면 레이블(label)을 활용할 수 있습니다. 레이블은 break 문이나 continue 문과 함께 사용되며, 특히 반복문이 여러 겹으로 중첩된 상황에서 어떤 루프를 종료하거나 건너뛸지 지정할 때 매우 유용합니다.
레이블의 구조는 아주 간단합니다. 식별자(이름) 뒤에 콜론(:)을 붙여 특정 문장이나 코드 블록 앞에 표시하면 됩니다. 아래에서 break와 continue를 각각 레이블과 조합해 사용하는 두 가지 예제를 살펴보겠습니다.
예제 1: break 문과 함께 레이블 사용하기
다음 코드는 레이블과 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>이 예제에서 break의 동작은 다음과 같이 구분됩니다.
break: 레이블 없이 사용하면 자신이 속한 가장 안쪽 루프만 종료합니다.break innerloop:innerloop레이블이 붙은 안쪽 루프를 종료합니다.break outerloop:outerloop레이블이 붙은 바깥쪽 루프 전체를 한 번에 종료합니다.
예제 2: continue 문과 함께 레이블 사용하기
다음은 레이블과 continue 문을 함께 사용한 예제입니다.
<html>
<body>
<script>
document.write("Entering the loop!<br />");
outerloop: // 레이블 이름
for (var i = 0; i < 3; i++) {
document.write("Outerloop: " + i + "<br />");
for (var j = 0; j < 5; j++) {
if (j == 3) {
continue outerloop; // 안쪽 루프를 건너뛰고 바깥 루프의 다음 반복으로 이동
}
document.write("Innerloop: " + j + "<br />");
}
}
document.write("Exiting the loop!<br />");
</script>
</body>
</html>이 코드에서 변수 j가 3이 되는 순간 continue outerloop가 실행됩니다. 그러면 안쪽 루프의 남은 반복은 모두 건너뛰고, 곧바로 바깥쪽 루프의 다음 차례로 이동합니다. 따라서 화면에는 Innerloop 값이 0, 1, 2까지만 출력됩니다.
정리
레이블은 일상적인 코드에서 자주 쓰이지 않지만, 중첩된 반복문을 한 번에 탈출하거나 특정 루프만 건너뛰어야 하는 상황에서는 코드를 훨씬 간결하고 명확하게 만들어 주는 강력한 도구입니다. 다만 남용하면 오히려 흐름을 추적하기 어려워질 수 있으므로, 필요한 경우에 적절히 사용하는 것이 좋습니다.