조건문과 반복문

일상에서 만약 ~라면 ~을 한다, ~하는 동안 ~을 반복한다처럼 판단하고 반복하듯, 프로그래밍에서도 조건에 따라 분기하거나 작업을 반복해야 합니다.

이때 사용하는 핵심 도구가 조건문(Conditional Statement)과 반복문(Loop Statement)입니다.

조건문과 반복문은 프로그램 흐름 제어의 핵심 요소입니다.

이번 장에서는 자바스크립트의 다양한 조건문/반복문을 살펴보며, 프로그램 논리를 설계하는 방법을 정리합니다.

조건문: 상황에 따라 다르게 행동하기

앞 절의 비교 연산 결과와 변수 재할당을 이용합니다. 예제를 먼저 눈으로 따라가며 “이번 조건은 참인가, 다음으로 실행할 줄은 어디인가”를 확인한 뒤 콘솔에서 실행하세요. 각 코드 블록은 별도 예제이므로 같은 age 선언을 한 스크립트에 모두 붙이지 않습니다.

조건문은 주어진 조건이 true인지 false인지에 따라 다른 코드 블록을 실행하도록 합니다.

마치 만약 비가 오면 우산을 가져가고, 그렇지 않으면 그냥 나간다와 같은 판단을 프로그램에 심어주는 것과 같습니다.

자바스크립트에서는 주로 if, else if, else, 그리고 switch 문을 사용하여 조건을 처리합니다. 불리언이 아닌 조건도 참·거짓으로 변환하므로 숫자 0과 문자열 "0"은 서로 다르게 판단됩니다.

if, else if, else: 기본적인 조건 판단

가장 흔하게 사용되는 조건문으로, 특정 조건이 참일 때만 코드를 실행하고 싶을 때 사용합니다.

let temperature = 20;

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

• if (조건): 괄호 안의 조건이 true이면 {} 안의 코드 블록이 실행됩니다.
• else if (다른 조건): if 문의 조건이 false일 때, else if의 다른 조건을 확인합니다. 이 조건이 true이면 해당 코드 블록이 실행됩니다. else if는 여러 개를 붙일 수 있습니다.
• else: if 문과 모든 else if 문의 조건이 모두 false일 때, else 뒤의 코드 블록이 실행됩니다. else는 필수가 아닙니다.

조건문 괄호 () 안에는 불리언(boolean) 값으로 평가될 수 있는 모든 표현식이 올 수 있습니다.

비교 연산자(>, <, === 등)나 논리 연산자(&&, ||, !)를 조합하여 복잡한 조건을 만들 수 있습니다.

let age = 18;
let hasConsent = true;

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

위의 나이 19와 동의 여부는 제어문을 연습하기 위해 정한 서비스 조건입니다. 실제 법령이나 모든 서비스의 이용 기준을 설명하는 숫자는 아닙니다. &&의 왼쪽이 거짓이므로 오른쪽 값이 참이어도 전체는 거짓입니다.

switch 문: 여러 개의 경우를 깔끔하게 처리하기

if-else if-else 문으로도 여러 조건을 처리할 수 있지만, 특정 변수의 값이 여러 경우의 수 중 하나와 일치하는지 확인할 때는 switch 문이 더 깔끔하고 가독성이 좋습니다.

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 값:: switch 표현식의 값과 엄격하게 비교하여 일치하는 곳에서 실행을 시작합니다. 숫자 1과 문자열 "1"은 서로 다른 경우입니다.
• break;: switch 전체를 빠져나갑니다. 생략하면 다음 case의 값이 일치하는지 다시 판단하지 않고 그 문장을 계속 실행합니다. 다만 이후의 break, 함수의 return, 또는 switch 끝을 만나면 중단합니다. 이를 폴스루(fall-through)라고 합니다. 위 코드에서 월요일의 break만 빼면 월요일과 수요일 메시지가 나오고, 수요일의 break에서 끝나므로 금요일 메시지는 나오지 않습니다.
• default:: switch 표현식의 값이 어떤 case와도 일치하지 않을 때 실행되는 블록입니다. else와 유사합니다. default는 필수가 아닙니다.

삼항 연산자: 간결한 조건식

삼항 연산자 (Conditional Ternary Operator)는 조건에 따라 두 값 중 하나를 선택하는 간결한 방법을 제공합니다.

주로 간단한 조건에 따라 변수에 값을 할당하거나 반환할 때 유용합니다.

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

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

형식은 조건 ? 값1 : 값2입니다.

조건이 true이면 값1이 선택되고, false이면 값2가 선택됩니다.

반복문: 작업을 여러 번 반복하기

반복문은 특정 코드 블록을 조건이 만족하는 동안 계속해서 실행하거나, 특정 횟수만큼 반복하도록 합니다.

이는 반복적인 작업을 수동으로 여러 번 작성할 필요 없이 효율적으로 처리할 수 있게 해줍니다.

자바스크립트에서는 for, while, do...while 등의 반복문을 제공합니다.

for 문: 정해진 횟수만큼 반복하기

for 문은 가장 흔하게 사용되는 반복문으로, 반복 횟수가 명확하거나 특정 범위 내에서 반복해야 할 때 유용합니다.

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

for 문의 괄호 () 안은 세 부분으로 구성됩니다.

위 for는 i = 0을 한 번 실행하고 조건 검사 → 출력 → i++를 반복합니다. 마지막 출력은 i = 4일 때이며, 이후 5로 증가한 뒤 5 < 5가 거짓이 되어 끝납니다. 조건을 i <= 5로 바꾸면 0부터 5까지 여섯 번 출력됩니다.

while 문: 조건이 만족하는 동안 반복하기

while 문은 특정 조건이 true인 동안 코드 블록을 계속해서 반복합니다.

for 문과 달리 반복 횟수가 명확하지 않을 때, 즉 어떤 조건이 만족될 때까지 반복해야 할 때 주로 사용됩니다.

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

while 문에서 조건을 변화시키는 부분이 없거나, 조건이 항상 true로 유지되는 경우 반복문이 영원히 끝나지 않는 무한 루프에 빠질 수 있습니다.

이는 브라우저를 멈추게 하거나 프로그램에 심각한 문제를 일으킬 수 있으므로 주의해야 합니다.

이 예제는 count++가 조건을 결국 거짓으로 만듭니다. 일반적으로는 조건 변화나 break 등 어떤 경로로 종료할지 정해야 합니다. 종료가 보이지 않는 코드는 브라우저에서 실행하기 전에 고치세요.

do...while 문: 최소 한 번은 실행

do...while 문은 while 문과 유사하지만, 조건식을 나중에 평가한다는 차이점이 있습니다.

이 말은 조건이 처음부터 false이더라도, 코드 블록이 최소 한 번은 실행된 후 조건 검사를 한다는 의미입니다.

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: 현재 실행 중인 반복문을 즉시 종료하고, 반복문 다음의 코드로 제어를 옮깁니다. switch 문에서 사용되는 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가 되어 반복문을 종료합니다.
  */

• continue: 현재 반복 주기의 나머지 부분을 건너뛰고, 다음 반복 주기로 즉시 넘어갑니다.

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

조건문과 반복문을 함께 설계할 때는 입력 조건을 먼저 확인한 뒤 if/switch로 분기 방식을 고르고, 반복이 필요하면 for/while 중 적절한 구조를 선택합니다.

라벨 없는 break는 가장 가까운 반복문 또는 switch를 끝냅니다. 반복문 안의 switch에서 사용하면 그 switch만 끝나므로 바깥 반복도 끝나는 것으로 해석하지 마세요.

continue의 다음 위치는 반복문마다 다릅니다. 위 for에서는 i++를 실행한 뒤 조건을 다시 검사합니다. while에서는 곧바로 조건 검사로 돌아가므로, 본문의 마지막에만 증가문을 두고 그 앞에서 continue하면 증가가 생략될 수 있습니다. 그림의 복귀 화살표는 for를 기준으로 합니다.

조건과 반복을 고를 때는 먼저 판단 횟수와 종료 조건을 나누어 봅니다.

if, switch, for, while, break, continue는 판단 횟수와 종료 조건에 맞춰 선택합니다.

직접 풀어보기

1부터 6까지 순회하며 3은 더하지 않고, 5를 만나면 더하기 전에 종료합니다. 먼저 합계를 구한 뒤 아래 코드로 확인하세요. 종료값만 6으로 바꾸면 합계가 어떻게 달라지나요?

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

공식 동작 설명: switch의 비교와 폴스루, continue의 이동 위치.

제어문 학습 정리

이 절의 핵심은 분기와 반복을 문제 조건에 맞게 배치해 실행 흐름을 안정적으로 제어하는 것입니다.

이번 장에서는 프로그램의 흐름을 조절하는 조건문과 반복문을 다뤘습니다.

if-else, switch 문을 통해 다양한 상황에 따라 코드를 분기하고, for, while 문을 통해 반복적인 작업을 효율적으로 수행하는 방법을 익혔습니다.

또한 break와 continue를 사용하여 반복문의 미세한 제어도 가능해졌습니다.

조건문과 반복문은 프로그램의 분기와 반복 흐름을 구성하는 기본 요소입니다.

다음 절에서는 자바스크립트의 함수 개념을 다룹니다.