조건문과 반복문

일상에서 “비가 오면 우산을 챙긴다”처럼 상황에 따라 판단하고, “다 읽을 때까지 한 장씩 넘긴다”처럼 같은 일을 반복하듯, 프로그램도 조건에 따라 다른 코드를 실행하거나 같은 작업을 여러 번 해야 합니다. 이때 쓰는 것이 조건문(conditional statement)과 반복문(loop statement)이며, 둘은 프로그램의 실행 흐름을 정하는 기본 도구입니다. 이 글에서는 자바스크립트의 여러 조건문과 반복문, 그리고 반복의 흐름을 바꾸는 break와 continue를 살펴봅니다.

위 그림은 한 번의 선택과 여러 번의 반복을 나눠 보여 줍니다. 범위나 여러 조건의 조합은 if로, 한 값을 여러 경우와 비교할 때는 switch로, 두 값 가운데 하나를 짧게 고를 때는 삼항 연산자로 한 번 선택합니다. 반복은 초기화, 조건, 갱신을 한곳에 두는 for, 값을 차례로 꺼내는 for...of, 조건만 매번 검사하는 while, 본문을 먼저 한 번 실행하는 do...while로 나뉩니다.

그림 가운데는 for가 도는 흐름입니다. 초기화 let i = 0을 한 번 실행한 뒤 조건 i < 5가 참이면 본문을, 거짓이면 반복 뒤의 문장을 실행합니다. 본문을 다 실행하거나 continue를 만나면 갱신 i++를 거쳐 조건으로 돌아가고, break를 만나면 갱신과 조건 검사를 건너뛰고 반복 밖으로 나갑니다. 그림 아래의 설명처럼 continue가 돌아가는 곳은 반복문마다 다르며, switch 안의 break는 switch만 끝낸다는 점도 기억해 둡니다.

조건문

앞 글의 비교 연산과 변수 재할당을 이용합니다. 예제를 실행하기 전에 “이번 조건은 참인가, 다음에 실행할 줄은 어디인가”를 눈으로 먼저 따라가 보세요. 코드 블록마다 따로 실행하는 예제이므로, 여러 예제의 age 선언을 한 스크립트에 함께 붙이지 않습니다.

조건문은 조건이 true인지 false인지에 따라 다른 코드를 실행합니다. 자바스크립트는 if, else if, else, switch로 조건을 처리하며, 조건이 불리언이 아니면 참과 거짓으로 바꿔 판단합니다. 그래서 숫자 0은 거짓이지만 문자열 "0"은 참으로 판단됩니다.

if, else if, else

가장 많이 쓰는 조건문으로, 조건이 참일 때만 코드를 실행합니다. 다음 코드는 기온 하나를 세 구간으로 나눠 구간마다 다른 문장을 출력합니다. 조건은 위에서부터 차례로 검사되므로, temperature > 25를 먼저 두고 temperature >= 20을 그다음에 둔 순서를 눈여겨보세요.

let temperature = 20;

if (temperature > 25) {
    console.log("오늘은 매우 덥습니다. 시원하게 입으세요.");
} else if (temperature >= 20) { // 위의 조건이 거짓이고, temperature가 20 이상일 때
    console.log("오늘은 쾌적한 날씨입니다.");
} else { // 위의 모든 조건이 거짓일 때
    console.log("오늘은 쌀쌀합니다. 따뜻하게 입으세요.");
}
// 현재 temperature가 20이므로, "오늘은 쾌적한 날씨입니다."가 출력됩니다.

if (조건)의 조건이 참이면 바로 뒤 중괄호 안의 코드를 실행합니다. 거짓이면 else if (다른 조건)의 조건을 차례로 확인해 처음으로 참인 블록을 실행하며, else if는 여러 개 붙일 수 있습니다. 모든 조건이 거짓이면 else의 블록을 실행하고, else는 생략해도 됩니다. 이 예제의 temperature는 20이므로 첫 조건 20 > 25는 거짓이고, 두 번째 조건 20 >= 20이 참이라 “오늘은 쾌적한 날씨입니다.”가 출력됩니다. 한 블록이 실행되면 나머지 조건은 검사하지 않습니다.

조건에는 불리언으로 판단할 수 있는 어떤 식이든 올 수 있으며, 비교 연산자와 논리 연산자를 조합해 복잡한 조건을 만들 수 있습니다.

let age = 18;
let hasConsent = true;

if (age >= 19 && hasConsent) { // age가 19 이상이고, hasConsent가 true일 때
    console.log("성인 콘텐츠를 이용할 수 있습니다.");
} else {
    console.log("성인 콘텐츠 이용이 불가능합니다.");
}
// age가 18이므로, "성인 콘텐츠 이용이 불가능합니다."가 출력됩니다.

나이 19와 동의 여부는 조건문을 연습하려고 정한 조건일 뿐, 실제 법령이나 서비스의 기준은 아닙니다. age가 18이라 &&의 왼쪽 18 >= 19가 거짓이므로, 오른쪽의 hasConsent가 참이어도 전체가 거짓이 되어 else의 메시지가 출력됩니다.

switch

한 값이 여러 경우 가운데 무엇과 같은지 확인할 때는 if를 여러 번 잇는 것보다 switch가 깔끔합니다. 다음 코드는 요일 이름 하나를 세 case와 비교하고, 맞는 것이 없으면 default로 갑니다. 각 case 끝의 break가 하는 일은 코드 아래에서 봅니다.

let dayOfWeek = "월요일";

switch (dayOfWeek) {
    case "월요일":
        console.log("오늘은 월요일입니다. 새로운 한 주가 시작됩니다.");
        break; // 현재 case의 코드 실행을 중단하고 switch 문을 빠져나갑니다.
    case "수요일":
        console.log("오늘은 수요일입니다. 한 주의 중간 지점!");
        break;
    case "금요일":
        console.log("오늘은 금요일입니다. 주말이 기다려집니다.");
        break;
    default: // 위에 나열된 어떤 case와도 일치하지 않을 때 실행됩니다.
        console.log("평범한 요일입니다.");
        break;
}
// dayOfWeek가 "월요일"이므로, "오늘은 월요일입니다. 새로운 한 주가 시작됩니다."가 출력됩니다.

switch (식)은 괄호 안의 식을 평가하고, 그 값과 ===로 같은 case에서 실행을 시작합니다. ===로 비교하므로 숫자 1과 문자열 "1"은 서로 다른 경우입니다. 어떤 case와도 같지 않으면 default의 코드를 실행하며, default는 else처럼 생략할 수 있습니다.

break는 switch 전체를 빠져나갑니다. break를 빼먹으면 다음 case의 값을 다시 비교하지 않고 그 아래 코드를 계속 실행하는데, 이를 폴스루(fall-through)라고 합니다. 이 코드에서 월요일의 break만 지우면 월요일과 수요일의 메시지가 차례로 나오고, 수요일의 break에서 멈추므로 금요일의 메시지는 나오지 않습니다.

더 깊이: case마다 같은 이름의 변수를 만들 수 없는 이유

case와 default는 실행이 뛰어들 수 있는 위치를 표시하는 이름표에 가깝고, 그 자체로 변수의 범위를 따로 만들지 않습니다. switch 뒤의 중괄호 전체가 하나의 블록이라서, 서로 다른 case에 적은 let과 const도 같은 범위에 선언됩니다. 그래서 첫 case에 const message = "hello";를, 둘째 case에 const message = "hi";를 적으면, 어느 case가 실행되는지와 상관없이 실행하기 전에 SyntaxError: Identifier 'message' has already been declared가 납니다.

해결 방법은 case 본문을 case "say_hi": { ... }처럼 중괄호로 한 번 더 감싸는 것입니다. 중괄호마다 새 블록이 생기므로 각 case의 message가 서로 다른 변수가 되고, 한 case에서 만든 변수를 다른 case에서 실수로 읽는 일도 막을 수 있습니다. 블록과 변수의 범위는 함수와 스코프에서 자세히 다룹니다.

default의 위치도 알아 둘 만합니다. default는 맨 끝이 아니라 중간에 적을 수도 있으며, 어느 위치에 있든 모든 case와 같지 않을 때만 그곳으로 갑니다. 다만 default에 break가 없으면 폴스루 규칙에 따라 그 아래에 적힌 case의 코드까지 이어서 실행됩니다. 이 규칙은 MDN의 switch 설명에 정리되어 있습니다.

삼항 연산자

삼항 연산자(conditional operator)는 조건에 따라 두 값 가운데 하나를 고르는 짧은 표현입니다. 형식은 조건 ? 값1 : 값2로, 조건이 참이면 값1, 거짓이면 값2가 결과가 됩니다. 간단한 조건에 따라 변수에 값을 넣을 때 씁니다.

let age = 20;
let message = (age >= 19) ? "성인입니다." : "미성년자입니다.";
console.log(message); // 결과: 성인입니다.

let isMorning = true;
let greeting = isMorning ? "좋은 아침입니다!" : "안녕하세요!";
console.log(greeting); // 결과: 좋은 아침입니다!

반복문

반복문은 조건이 참인 동안, 또는 정한 횟수만큼 같은 코드를 실행합니다. 같은 코드를 여러 번 적지 않아도 되므로 반복 작업을 간단하게 처리할 수 있습니다.

for

for는 가장 많이 쓰는 반복문으로, 반복 횟수가 정해져 있거나 일정한 범위를 차례로 돌 때 씁니다. 다음 코드는 변수 i를 0부터 1씩 늘리며 본문을 다섯 번 실행하고, 실행 결과를 코드 아래의 주석에 적었습니다.

for (let i = 0; i < 5; i++) {
    // 0부터 4까지 5번 반복됩니다.
    console.log(i + "번째 반복입니다.");
}
/*
결과:
0번째 반복입니다.
1번째 반복입니다.
2번째 반복입니다.
3번째 반복입니다.
4번째 반복입니다.
*/

괄호 안은 세미콜론으로 나눈 세 부분입니다. 초기화 식 let i = 0은 반복을 시작할 때 한 번만 실행하며 보통 횟수를 셀 변수를 만듭니다. 조건 식 i < 5는 매번 본문을 실행하기 전에 검사해, 참이면 본문을 실행하고 거짓이면 반복을 끝냅니다. 증감 식 i++는 본문을 한 번 실행할 때마다 실행합니다.

그래서 이 코드는 i가 0부터 4일 때 다섯 번 출력합니다. 마지막 출력은 i가 4일 때이고, 그 뒤 i가 5가 되어 5 < 5가 거짓이 되면 끝납니다. 조건을 i <= 5로 바꾸면 0부터 5까지 여섯 번 출력됩니다.

while

while은 조건이 참인 동안 본문을 반복합니다. 반복 횟수를 미리 알 수 없고, 어떤 상태가 될 때까지 반복해야 할 때 주로 씁니다.

let count = 0;
while (count < 3) { // count가 3보다 작은 동안 반복
    console.log("현재 카운트: " + count);
    count++; // count 값을 1 증가시킵니다. 이 부분이 없으면 무한 루프에 빠집니다!
}
/*
결과:
현재 카운트: 0
현재 카운트: 1
현재 카운트: 2
*/

본문 안에서 조건을 바꾸는 코드가 없으면 조건이 계속 참으로 남아 반복이 끝나지 않는데, 이를 무한 루프(infinite loop)라고 합니다. 무한 루프는 브라우저 탭을 멈추게 합니다. 이 예제는 count++가 결국 조건을 거짓으로 만들어 세 번 출력하고 끝나지만, 반복을 쓸 때는 조건을 바꾸거나 break로 빠져나오는 등 어떤 경로로 끝날지를 항상 먼저 정합니다.

do...while

do...while은 while과 비슷하지만 조건을 본문 뒤에서 검사합니다. 그래서 조건이 처음부터 거짓이어도 본문은 최소 한 번 실행됩니다.

let num = 5;

do {
    console.log("이 메시지는 최소 한 번은 출력됩니다. num: " + num);
    num++;
} while (num < 3); // 조건이 false이지만, 이미 한 번 실행되었습니다.
/*
결과:
이 메시지는 최소 한 번은 출력됩니다. num: 5
*/

이 예제는 5를 출력하고 num++로 6을 만든 뒤 6 < 3을 검사해 끝납니다. 같은 시작값으로 while (num < 3)을 쓰면 본문이 한 번도 실행되지 않습니다. 입력을 먼저 한 번 받고 나서 다시 받을지 판단하는 경우처럼, 본문을 먼저 한 번 실행해야 할 때 do...while을 고릅니다.

break와 continue

반복 도중에 흐름을 바꿔야 할 때는 break와 continue를 씁니다. break는 반복문을 즉시 끝내고 반복문 다음의 코드로 넘어갑니다.

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        console.log("i가 5가 되어 반복문을 종료합니다.");
        break; // i가 5가 되면 반복문이 멈춥니다.
    }
    console.log(i);
}
/*
결과:
0
1
2
3
4
i가 5가 되어 반복문을 종료합니다.
*/

i가 5일 때 메시지를 출력한 뒤 break로 반복을 끝내므로, 5부터 9까지의 숫자는 출력되지 않습니다.

continue는 이번 회차의 나머지 코드를 건너뛰고 다음 회차로 넘어갑니다. 다음 코드에서는 i가 짝수일 때 continue가 실행되어 그 아래의 console.log()에 닿지 않으므로 홀수만 출력됩니다. break와 달리 반복 자체는 끝나지 않고 조건 i < 10이 거짓이 될 때까지 계속됩니다.

for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) { // i가 짝수이면
        continue; // 아래 코드를 건너뛰고 다음 반복으로 넘어갑니다.
    }
    console.log("홀수: " + i);
}
/*
결과:
홀수: 1
홀수: 3
홀수: 5
홀수: 7
홀수: 9
*/

라벨 없는 break는 가장 가까운 반복문이나 switch 하나만 끝냅니다. 반복문 안의 switch에서 break를 쓰면 그 switch만 끝나고 바깥 반복은 계속된다는 점에 주의합니다.

continue가 넘어가는 곳은 반복문마다 다릅니다. for에서는 증감 식 i++를 실행한 뒤 조건을 검사하지만, while에서는 곧바로 조건 검사로 돌아갑니다. 그래서 while 본문의 맨 끝에만 증가 코드를 두고 그 앞에서 continue하면 증가를 건너뛰어 무한 루프가 될 수 있습니다. 앞 그림의 되돌아가는 화살표도 for를 기준으로 그린 것입니다. 자세한 동작은 MDN의 switch와 continue 문서에서 확인할 수 있습니다.

정리

• if, else if, else는 위에서부터 처음 참인 블록 하나만 실행하며, 조건이 불리언이 아니면 참과 거짓으로 바꿔 판단합니다.
• switch는 값을 ===로 비교해 맞는 case부터 실행하고, break가 없으면 아래 case로 이어서 실행합니다.
• 삼항 연산자 조건 ? 값1 : 값2는 두 값 가운데 하나를 짧게 고릅니다.
• for는 초기화, 조건, 증감을 한곳에 두고, while은 조건만 매번 검사하며, do...while은 본문을 먼저 한 번 실행합니다.
• 반복을 쓸 때는 어떤 경로로 끝날지 먼저 정해 무한 루프를 피합니다.
• break는 가장 가까운 반복문이나 switch를 끝내고, continue는 이번 회차를 건너뛰며, for에서는 증감 식을 거쳐 조건으로 갑니다.

연습 문제

1. 건너뛰기와 끝내기

다음 코드는 1부터 6까지 돌면서 3은 더하지 않고, 5를 만나면 더하기 전에 끝냅니다. 출력될 합계를 먼저 구해 보세요. 조건 value === 5를 value === 6으로 바꾸면 합계는 어떻게 될까요?

let total = 0;
for (let value = 1; value <= 6; value++) {
    if (value === 3) continue;
    if (value === 5) break;
    total += value;
}
console.log(total);

2. 폴스루

switch 예제에서 dayOfWeek를 "수요일"로 바꾸고, 수요일의 break만 지웠습니다. 어떤 메시지가 출력될까요?

3. 끝나지 않는 while

다음 코드는 0부터 4까지 돌면서 2만 건너뛰고 출력하려고 했지만, 실행하면 브라우저가 멈춥니다. 왜 그럴까요? 어떻게 고치면 될까요?

let i = 0;
while (i < 5) {
    if (i === 2) continue;
    console.log(i);
    i++;
}

다음 글 함수와 스코프에서는 코드를 이름 붙은 묶음으로 만들어 다시 쓰는 함수와, 변수를 쓸 수 있는 범위인 스코프를 다룹니다.