JavaScript switch: 깔끔한 다중 조건 처리 방법 | feat. if ... else if

JavaScript에서 여러 조건을 처리할 때, 보통 if...else if 문을 많이 사용합니다. 하지만 조건이 많아질수록 코드가 길어지고 가독성이 떨어질 수 있습니다. 이때, switch 문을 사용하면 더 깔끔하고 읽기 쉬운 코드로 만들 수 있습니다.

switch 문의 기본 구조

switch 문은 다음과 같은 구조를 가집니다:

let variable = 'value';

switch (variable) {
  case 'value1':
    // variable이 'value1'과 같을 때 실행할 코드
    break;
  case 'value2':
    // variable이 'value2'와 같을 때 실행할 코드
    break;
  default:
    // 모든 case와 일치하지 않을 때 실행할 코드
    break;
}

구조 설명:

• switch 키워드 뒤에 괄호 () 안에 비교할 변수를 넣습니다.
• case 키워드 뒤에 비교할 값을 작성하고, 해당 값이 변수와 일치하면 코드가 실행됩니다.
• break 키워드는 일치하는 case의 코드가 실행된 후 switch 문을 빠져나가도록 합니다.
• default는 어떤 case도 일치하지 않을 때 실행되는 코드입니다.

예제 1: 요일에 따라 다른 메시지 출력

let day = '월요일';

switch (day) {
  case '월요일':
    console.log('한 주의 시작입니다!');
    break;
  case '금요일':
    console.log('주말이 곧 다가옵니다!');
    break;
  case '토요일':
  case '일요일':
    console.log('즐거운 주말 보내세요!');
    break;
  default:
    console.log('평범한 하루입니다.');
}

결과:

• day가 '월요일'이면 "한 주의 시작입니다!" 출력
• day가 '금요일'이면 "주말이 곧 다가옵니다!" 출력
• day가 '토요일' 또는 '일요일'이면 "즐거운 주말 보내세요!" 출력
• 다른 값이면 "평범한 하루입니다." 출력

if...else if vs. switch

if...else if 문으로도 위와 같은 기능을 구현할 수 있지만, switch 문이 더 깔끔하게 정리됩니다.

if...else if 문:

if (day === '월요일') {
  console.log('한 주의 시작입니다!');
} else if (day === '금요일') {
  console.log('주말이 곧 다가옵니다!');
} else if (day === '토요일' || day === '일요일') {
  console.log('즐거운 주말 보내세요!');
} else {
  console.log('평범한 하루입니다.');
}

비교 조건이 많아질수록 if...else if 문은 길어지지만, switch 문은 한눈에 보기 쉬운 구조를 유지할 수 있습니다.

---

switch에서 주의할 점

1️⃣ switch 문에서는 범위 조건을 사용할 수 없음

switch 문은 특정 값과 정확히 일치하는 경우만 비교할 수 있습니다.
따라서 다음과 같은 범위 조건을 switch에서 사용할 수 없습니다:

// ❌ 잘못된 예제
function lifePhase(age) {
  switch (age) {
    case 0 <= age <= 3:
      return 'baby';
    case 4 <= age <= 12:
      return 'child';
    default:
      return 'adult';
  }
}
console.log(lifePhase(2)); // 예상대로 동작하지 않음!

이렇게 하면 case 0 <= age <= 3가 true 또는 false로 평가되며,
switch (age)가 숫자를 비교하는 것이 아니라 불린 값(true/false)을 비교하게 됨! 🚨

✅ 올바른 방법 (if...else if 사용)

function lifePhase(age) {
  if (age >= 0 && age <= 3) {
    return 'baby';
  } else if (age >= 4 && age <= 12) {
    return 'child';
  } else {
    return 'adult';
  }
}
console.log(lifePhase(2)); // 'baby' (정상 동작)

💡 범위 비교가 필요하면 if...else if 문을 사용해야 합니다!

2️⃣ return을 사용하면 break를 생략할 수 있음

보통 switch 문에서 break를 사용하지 않으면 다음 case로 넘어가는 fall-through 현상이 발생합니다.

let num = 2;
switch (num) {
  case 1:
    console.log("One");
  case 2:
    console.log("Two");
  case 3:
    console.log("Three");
}
// "Two"와 "Three"가 출력됨! (break가 없어서)

하지만 함수 내부에서 return을 사용하면 break가 필요 없음
왜냐하면 return이 실행되면 함수 자체가 종료되기 때문입니다.

const toEmoticon = (str) => {
  switch (str) {
    case 'shrug': return '|_{"}_|';
    case 'smiley face': return ':)';
    case 'frowny face': return ':(';
    case 'winky face': return ';)';
    case 'heart': return '<3';
    default: return '|_(* ~ *)_|';
  }
};
console.log(toEmoticon('shrug')); // '|_{"}_|'

✅ return을 사용하면 break 없이도 안전하게 동작합니다! 🚀

---

마무리

• 여러 조건을 처리할 때 switch 문을 사용하면 코드가 더 깔끔해집니다.
• break 문을 사용하여 불필요한 코드 실행을 방지할 수 있습니다.
• default 문을 추가하면 예상치 못한 입력에도 대응할 수 있습니다.
• switch는 범위 비교를 할 수 없으므로, 범위를 체크할 때는 if...else if 문을 사용해야 합니다.
• 함수 내부에서 return을 사용하면 break를 생략해도 문제가 없습니다.

switch 문을 적절히 활용하면 코드 가독성을 높이고 유지보수를 쉽게 만들 수 있습니다! 😊

---

퀴즈를 풀었는데 틀려버렸습니다.

===가 필요 없다고 착각했어요. 조건 walkSignal 이 'Walk'일 경우에 작동해야하는건데, 저는 walkSignal 에 값이 있는지 없는지만 체크했었네요.