JavaScript switch문 기본 사용법과 예제 정리

자바스크립트에서는 다양한 조건을 처리하기 위해 switch 문을 사용합니다. 이 구문은 특정 표현식의 값을 기준으로 여러 조건 중 하나를 선택하여 실행할 수 있게 해주는 제어 구조로, 많은 경우 특히 유용합니다. 이번 포스팅에서는 switch 문의 기본적인 사용법과 함께 몇 가지 예제를 통해 그 활용에 대해 살펴보도록 하겠습니다.

switch 문의 기본 구조

switch 문의 구조는 다음과 같습니다.

switch (표현식) {
  case 값1:
    // 표현식이 값1과 일치할 때 실행되는 코드
    break;
  case 값2:
    // 표현식이 값2와 일치할 때 실행되는 코드
    break;
  // 추가적인 case 문의 경우
  default:
    // 어떤 case에도 해당하지 않을 때 실행되는 코드
}

여기서 표현식은 비교하고자 하는 값 혹은 변수를 의미하며, case 값은 이 표현식과 비교할 값을 나타냅니다. 각 case 블록의 끝에는 break 문이 배치되어야 하며, 이는 해당 블록의 실행이 끝났음을 나타내고 switch 문을 종료하게 만듭니다. default 블록은 모든 조건이 맞지 않을 경우 실행되는 코드입니다.

switch 문의 사용 예시

다음은 switch 문을 활용한 간단한 예제입니다.

let day = 3;
let dayName;
switch (day) {
  case 1:
    dayName = "월요일";
    break;
  case 2:
    dayName = "화요일";
    break;
  case 3:
    dayName = "수요일";
    break;
  case 4:
    dayName = "목요일";
    break;
  case 5:
    dayName = "금요일";
    break;
  case 6:
    dayName = "토요일";
    break;
  case 7:
    dayName = "일요일";
    break;
  default:
    dayName = "잘못된 날짜";
}
console.log("오늘은 " + dayName + "입니다.");

위 코드에서는 day 변수의 값에 따라 해당하는 요일을 출력하게 됩니다. 만약 day 값이 1에서 7 사이의 값이 아니라면, default 블록이 실행되어 “잘못된 날짜”라는 메시지가 출력됩니다.

switch 문과 비교연산자의 차이

switch 문의 비교는 === 연산자를 사용하여 이루어집니다. 즉, 값과 자료형이 모두 동일해야만 조건이 참으로 평가됩니다. 이는 자바스크립트의 비교 연산에서 발생할 수 있는 오류를 줄이는 데 유리합니다. 예제를 통해 이 점을 확인해 보겠습니다.

let fruit = 'apple';
switch (fruit) {
  case 'banana':
    console.log('바나나입니다.');
    break;
  case 'apple':
    console.log('사과입니다.');
    break;
  case 'orange':
    console.log('오렌지입니다.');
    break;
  default:
    console.log('알 수 없는 과일입니다.');
}

이 코드에서 fruit 변수의 값이 ‘apple’이므로, 해당 case 블록이 실행되어 “사과입니다.”라는 메시지가 출력됩니다. 만약 fruit 값이 ‘grape’였다면, default 블록이 실행되어 “알 수 없는 과일입니다.”라는 메시지가 출력됩니다.

fall-through 현상 이해하기

자바스크립트의 switch 문에서는 fall-through 현상이 발생할 수 있습니다. 이는 특정 case 아래에 명시된 코드를 실행한 후 break 문이 없으면, 다음 case 블록도 연이어 실행되는 것을 의미합니다.

let num = '3';
switch (num) {
  case '1':
    console.log('숫자 1입니다');
    break;
  case '2':
    console.log('숫자 2입니다');
    break;
  case '3':
  case '4':
    console.log('숫자 3 또는 4입니다');
    break;
  default:
    console.log('숫자가 아닙니다');
}

위 코드에서 num의 값이 ‘3’이므로, case ‘3’이 실행되고 뒤이어 case ‘4’와 연관된 코드도 함께 실행되어 “숫자 3 또는 4입니다”라는 메시지가 출력됩니다. 이처럼 의도적으로 fall-through를 사용하여 여러 case에서 동일한 코드를 실행시킬 수 있습니다.

switch 문의 장점

switch 문은 여러 조건을 처리할 때 매우 유용하며, 특히 다음과 같은 장점을 가집니다:

• 가독성: 여러 개의 case로 분기되어 있어, if-else 문보다 코드의 가독성이 좋습니다.
• 엄격한 비교: switch 문에서는 기본적으로 === 연산자를 사용하여 값을 비교하므로, 자료형과 값이 모두 동일해야 일치합니다.

이러한 이유로 switch 문은 많은 조건을 비교해야 하는 상황에서 특히 효과적으로 사용됩니다. 그러나 복잡한 조건 로직이 필요하다면 if-else 문이 더 적합할 수 있습니다.

마무리

오늘은 자바스크립트의 switch 문에 대해 알아보았습니다. 이 구문은 특정 표현식의 값을 기반으로 여러 상황을 간편하게 처리할 수 있는 유용한 도구입니다. 상황에 맞는 적절한 조건문을 선택하여 효율적으로 코드를 작성하는 것이 중요하니, 항상 명확한 로직을 사용하도록 유의하시기 바랍니다. 즐거운 코딩 되세요!

자주 찾으시는 질문 FAQ