JavaScript / if·else와 switch 조건문 사용법과 차이

JavaScript에서 if / else if / else는 참·거짓 조건을 차례로 평가해 실행할 경로를 고릅니다. switch는 하나의 값이 여러 case 값 중 어디에 일치하는지 비교합니다. 점수 구간처럼 범위 조건은 if, 상태 코드처럼 같은 값과 비교하는 분기는 switch가 읽기 쉬운 경우가 많습니다.

if, else if, else의 평가 순서

처음 참이 되는 조건의 블록 하나를 실행하면 뒤의 else if는 검사하지 않습니다. 어떤 조건도 참이 아니면 선택적인 else를 실행합니다. 넓은 범위를 먼저 쓰면 더 좁은 조건에 도달하지 못할 수 있으므로 점수처럼 겹치는 기준은 큰 값부터 검사합니다.

const score = 85;
let grade;
if (score >= 90) {
  grade = 'A';
} else if (score >= 80) {
  grade = 'B';
} else {
  grade = 'C';
}
console.log(grade); // 'B'

조건에는 꼭 불리언만 들어가는 것은 아닙니다. 0·빈 문자열·null·undefined·NaN은 거짓으로, 문자열 "0"과 빈 배열은 참으로 평가됩니다. 사용자 입력이 숫자인지 판단할 때 단순히 if (input.value)에 의존하지 말고 필요한 조건을 명시하세요. MDN의 if...else 문서에서 평가 규칙을 볼 수 있습니다.

switch는 case와 엄격하게 비교합니다

switch는 기준 표현식을 한 번 평가한 뒤 일치하는 case부터 실행합니다. 비교는 자료형을 자동 변환하지 않으므로 숫자 1과 문자열 "1"은 일치하지 않습니다. 일치하는 case가 없으면 default가 있을 때 그 위치부터 실행합니다.

const status = 'sent';
let message;
switch (status) {
  case 'ready':
    message = '상품 준비 중';
    break;
  case 'sent':
    message = '상품 발송 완료';
    break;
  default:
    message = '상태 확인 필요';
}
console.log(message); // '상품 발송 완료'

상태 값이 입력 요소에서 왔다면 보통 문자열입니다. 숫자 case 1과 비교하려면 입력값을 의도적으로 숫자로 변환해야 합니다. switch가 언제나 여러 if보다 좋은 것은 아니며, 범위 비교나 복합 조건은 if가 더 분명합니다. MDN의 switch 문서를 참고하세요.

break와 폴스루를 구분하기

일치한 case의 코드가 끝나도 break가 없으면 다음 case의 코드까지 이어서 실행합니다. 이때 다음 case의 값이 일치하는지 다시 비교하지 않습니다. 이를 폴스루(fall-through)라고 합니다.

const color = 'red';
switch (color) {
  case 'red':
    console.log('빨강 선택');
    // break가 없으므로 다음 코드도 실행됩니다.
  case 'blue':
    console.log('다음 분기의 코드');
    break;
}

위 예제는 두 줄을 출력합니다. 여러 값이 같은 작업을 해야 한다면 case "ready": case "waiting":처럼 앞쪽 case에 코드를 두지 않고 의도적으로 공유할 수도 있습니다. 각 경우가 독립적이어야 한다면 break를 빠뜨리지 않았는지 확인하세요.

전체 예제: 점수와 배송 상태 분기

아래 코드를 UTF-8로 condition-example.html에 저장해 브라우저에서 엽니다. 점수는 if / else if / else로 범위를 판별하고 배송 상태는 switch로 처리합니다. 빈 값, 범위 밖 값, 숫자가 아닌 값은 등급을 계산하기 전에 걸러냅니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>if와 switch 분기 실습</title>
</head>
<body>
<label for="score">점수(0~100)</label>
<input id="score" type="text" value="85">
<label for="status">배송 상태</label>
<select id="status">
  <option value="ready">준비</option>
  <option value="sent">발송</option>
  <option value="unknown">기타</option>
</select>
<button id="run" type="button">결과 확인</button>
<button id="reset" type="button">처음으로</button>
<pre id="output" aria-live="polite"></pre>
<script>
const scoreInput = document.querySelector('#score');
const statusInput = document.querySelector('#status');
const output = document.querySelector('#output');

function render() {
  const raw = scoreInput.value.trim();
  const score = Number(raw);
  let grade;
  if (raw === '' || !Number.isFinite(score) || score < 0 || score > 100) {
    grade = '0~100 사이의 점수를 입력하세요.';
  } else if (score >= 90) {
    grade = 'A 등급';
  } else if (score >= 80) {
    grade = 'B 등급';
  } else if (score >= 70) {
    grade = 'C 등급';
  } else {
    grade = 'D 등급';
  }

  let delivery;
  switch (statusInput.value) {
    case 'ready':
      delivery = '상품 준비 중';
      break;
    case 'sent':
      delivery = '상품 발송 완료';
      break;
    default:
      delivery = '상태 확인 필요';
  }
  output.textContent = `${grade}\n${delivery}`;
}

document.querySelector('#run').addEventListener('click', render);
document.querySelector('#reset').addEventListener('click', () => {
  scoreInput.value = '85';
  statusInput.value = 'ready';
  render();
});
render();
</script>
</body>
</html>

초기 점수 85와 준비 상태에서는 B 등급과 상품 준비 중이 나옵니다. 점수를 95로 바꾸면 A 등급, 배송을 발송으로 바꾸면 발송 완료가 됩니다. 빈 값이나 abc에는 입력 안내가 나오며, 배송 상태 선택은 계속 별도로 처리됩니다. ‘처음으로’를 누르면 두 입력과 결과가 복원됩니다.

실수하기 쉬운 조건문 사용법

if (value = 10)은 비교가 아니라 대입입니다. 값이 같은지 비교할 때는 보통 ===를 사용하세요. 중첩 if에서는 중괄호를 사용해 어느 else가 어느 if에 연결되는지 분명히 하세요. 각 case에서 같은 이름의 let이나 const를 선언해야 한다면 해당 case를 블록으로 감싸세요.

숫자 입력의 실제 자료형과 Number() 변환 조건은 JavaScript Number()로 입력값 검사하는 방법에서 더 자세히 확인할 수 있습니다. 입력의 유효성 검사를 분기보다 먼저 수행하면 의도하지 않은 경로를 줄일 수 있습니다.