JavaScript 스위치 문 완전 정복: 문법, 활용 사례 및 실전 예제

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. 소개: switch case란 무엇인가?

JavaScript에서 조건 분기는 프로그램 흐름을 제어하는 데 중요한 역할을 합니다. 이러한 구조 중 switch 문은 여러 조건을 효율적으로 처리할 수 있는 구문으로 사용됩니다.
switch 문은 특정 값에 따라 서로 다른 처리를 실행하고 싶을 때 유용합니다. 예를 들어, 요일에 따라 다른 메시지를 표시하거나 사용자 입력에 따라 동작을 전환할 때 사용됩니다.

switch 문의 사용 사례

switch 문은 다음과 같은 상황에서 특히 효과적입니다:

• 여러 조건을 효율적으로 처리하고 싶을 때 : if 문을 반복하는 대신 switch 를 사용하면 코드가 간결해집니다.
• 각 조건마다 다른 처리를 실행하고 싶을 때 : 데이터에 따라 동작을 전환할 때 유용합니다.
• 코드 가독성을 높이고 싶을 때 : 구조가 명확해 조건 로직을 정리하는 데 도움이 됩니다.

switch 의 주요 특징

• 값 기반 분기 : switch 문은 표현식의 평가 결과가 특정 값과 일치하는지를 검사합니다.
• break 로 제어 : break 문은 다음 case 로 흐르는 것을 방지하고 실행을 중단합니다.
• default 사용 : 어떤 case도 일치하지 않을 때 수행할 기본 동작을 정의합니다.

요약

switch 문은 조건 분기를 체계적으로 정리하고 JavaScript 코드의 가독성을 향상시키는 유용한 도구입니다. 다음 섹션에서는 기본 구문과 구체적인 사용 예제를 설명합니다.

2. 기본 구문 및 역할

JavaScript에서 switch 문은 특정 값에 따라 로직을 분기하는 편리한 제어 구조입니다. 이 섹션에서는 기본 구문과 각 요소의 역할을 자세히 설명합니다.

기본 구문

아래는 switch 문의 기본 구조입니다.

switch (式) {
  case 値1:
    // 値1に一致した場合の処理
    break;
  case 値2:
    // 値2に一致した場合の処理
    break;
  default:
    // どの値にも一致しなかった場合の処理
}

각 요소에 대한 설명은 다음과 같습니다.

구문 요소 상세

1. switch (expression)

• expression 은 비교할 값이나 계산된 표현식을 포함합니다.

2. case value:

• 각 case 는 expression 과 비교할 값을 지정합니다.

3. break;

• break 문은 일치하는 case 가 실행된 후 switch 문을 빠져나가게 합니다.

4. default:

• 어떤 case 도 일치하지 않을 때 수행할 처리를 정의합니다.

실용 예제

요일에 따라 메시지를 표시하는 예제입니다.

let day = "月曜日";

switch (day) {
  case "月曜日":
    console.log("週の始まりです。頑張りましょう！");
    break;
  case "金曜日":
    console.log("もうすぐ週末です。");
    break;
  default:
    console.log("通常の日です。");
}

요약

switch 문은 간단하고 가독성이 높은 조건 분기를 제공합니다. 다음에서는 “3. switch 의 실용 예제” 를 소개하며 보다 고급 사용법을 살펴보겠습니다.

3. switch 문의 실용 예제

여기서는 JavaScript의 switch 문을 구체적인 예제를 통해 기본부터 고급까지 설명하여 실제 프로그래밍에서 어떻게 활용되는지 이해하도록 돕습니다.

기본 조건 분기

예제 1: 요일에 따라 메시지 표시

let day = "水曜日";

switch (day) {
  case "月曜日":
    console.log("今週も頑張りましょう！");
    break;
  case "水曜日":
    console.log("週の半ばです。あと少し！");
    break;
  case "金曜日":
    console.log("週末まであと1日！");
    break;
  default:
    console.log("リラックスできる日です。");
}

여러 case 를 그룹화하기

예제 2: 평일과 주말 구분

let day = "土曜日";

switch (day) {
  case "月曜日":
  case "火曜日":
  case "水曜日":
  case "木曜日":
  case "金曜日":
    console.log("今日は平日です。");
    break;
  case "土曜日":
  case "日曜日":
    console.log("今日は週末です。");
    break;
  default:
    console.log("無効な曜日です。");
}

함수와 switch 결합하기

예제 3: 사용자 권한

function getUserPermission(role) {
  switch (role) {
    case "admin":
      return "すべての権限があります。";
    case "editor":
      return "編集権限があります。";
    case "viewer":
      return "閲覧のみ可能です。";
    default:
      return "権限がありません。";
  }
}

console.log(getUserPermission("editor"));

요약

이 실용적인 예시들을 통해 이제 switch 문을 어떻게 사용하는지 더 잘 이해하게 되었습니다. 다음으로 “4. switch vs if – 어느 것을 사용해야 할까요?” 를 다루겠습니다.

4. switch vs if — 어느 것을 선택해야 할까요?

switch와 if 모두 JavaScript에서 조건 분기를 처리할 수 있지만, 사용 방식이 다릅니다. 두 문법의 차이를 이해하면 상황에 맞는 적절한 선택을 할 수 있습니다.

기본 차이점

예시와 비교

예시 1: switch 사용

let color = "赤";

switch (color) {
  case "赤":
    console.log("ストップ！");
    break;
  case "黄":
    console.log("注意！");
    break;
  case "青":
    console.log("進んでください！");
    break;
  default:
    console.log("無効な色です。");
}

예시 2: if 사용

let score = 85;

if (score >= 90) {
  console.log("評価: A");
} else if (score >= 75) {
  console.log("評価: B");
} else if (score >= 50) {
  console.log("評価: C");
} else {
  console.log("評価: F");
}

요약

switch와 if를 적절히 선택하면 효율적인 코드를 작성할 수 있습니다. 다음으로 “5. 오류 방지를 위한 팁” 을 논의하겠습니다.

5. 오류 방지를 위한 팁

JavaScript switch 문은 편리하지만, 잘못 사용하면 버그나 예상치 못한 동작을 일으킬 수 있습니다. 이 섹션에서는 오류를 방지하기 위한 핵심 포인트를 설명합니다.

1. break를 빼먹으면 폴스루가 발생합니다

예시:

let fruit = "リンゴ";

switch (fruit) {
  case "リンゴ":
    console.log("リンゴが選ばれました。");
  case "バナナ":
    console.log("バナナが選ばれました。");
    break;
  default:
    console.log("その他のフルーツです。");
}

결과:

リンゴが選ばれました。
バナナが選ばれました。

해결책:

switch (fruit) {
  case "リンゴ":
    console.log("リンゴが選ばれました。");
    break;
  case "バナナ":
    console.log("バナナが選ばれました。");
    break;
  default:
    console.log("その他のフルーツです。");
}

2. default를 잊지 마세요

예시:

let command = "停止";

switch (command) {
  case "開始":
    console.log("システムを起動します。");
    break;
  case "終了":
    console.log("システムを終了します。");
    break;
}

해결책:

default:
  console.log("無効なコマンドです。");

3. 타입 불일치에 주의하세요

예시:

let value = 1;

switch (value) {
  case "1":
    console.log("文字列の1です。");
    break;
  case 1:
    console.log("数値の1です。");
    break;
  default:
    console.log("一致しません。");
}

요약

이 팁들을 따르면 오류를 예방하고 효율적이며 유지보수가 쉬운 코드를 작성할 수 있습니다.

6. switch 고급 기법

JavaScript switch 문은 기본적인 분기뿐만 아니라 보다 유연하고 고급적인 구현에도 활용될 수 있습니다.

1. 여러 케이스 그룹화

예시:

let day = "土曜日";

switch (day) {
  case "月曜日":
  case "火曜日":
  case "水曜日":
  case "木曜日":
  case "金曜日":
    console.log("今日は平日です。");
    break;
  case "土曜日":
  case "日曜日":
    console.log("今日は週末です。");
    break;
  default:
    console.log("無効な曜日です。");
}

2. 중첩 switch 문

예시:

let menu = "ドリンク";
let subMenu = "コーヒー";

switch (menu) {
  case "フード":
    switch (subMenu) {
      case "ハンバーガー":
        console.log("ハンバーガーが選ばれました。");
        break;
      default:
        console.log("無効なフードメニューです。");
    }
    break;

  case "ドリンク":
    switch (subMenu) {
      case "コーヒー":
        console.log("コーヒーが選ばれました。");
        break;
      default:
        console.log("無効なドリンクメニューです。");
    }
    break;
}

요약

이러한 고급 기법을 사용하면 복잡한 분기를 보다 효율적으로 처리할 수 있습니다.

7. FAQ: 일반적인 질문 및 문제 해결

많은 개발자들이 JavaScript의 switch 문을 사용할 때 비슷한 문제를 겪습니다. 여기 일반적인 질문과 해결책을 소개합니다.

Q1: break를 빼먹으면 어떻게 되나요?

예시:

let value = 2;

switch (value) {
  case 1:
    console.log("1が選択されました。");
  case 2:
    console.log("2が選択されました。");
  case 3:
    console.log("3が選択されました。");
}

결과:

2が選択されました。
3が選択されました。

해결책:

break;

Q2: default가 필수인가요?

예시:

let fruit = "パイナップル";

switch (fruit) {
  case "リンゴ":
    console.log("リンゴが選ばれました。");
    break;
  case "バナナ":
    console.log("バナナが選ばれました。");
    break;
}

해결책:

default:
  console.log("不明なフルーツです。");

Q3: switch가 범위를 비교할 수 있나요?

예시:

let score = 85;

switch (true) {
  case score >= 90:
    console.log("評価: A");
    break;
  case score >= 75:
    console.log("評価: B");
    break;
  default:
    console.log("評価: F");
}

요약

이 FAQ를 활용해 오류를 처리하고 switch 문의 이해도를 높이세요.

8. 코드 샘플 및 연습 문제

이 섹션에서는 switch 문을 사용한 샘플 코드와 연습 문제를 제공합니다. 직접 풀어보면서 이해를 깊게 하세요.

1. 기본 샘플 코드

예시 1: 월을 기준으로 계절 결정하기

let month = 3;

switch (month) {
  case 12:
  case 1:
  case 2:
    console.log("冬です。");
    break;
  case 3:
  case 4:
  case 5:
    console.log("春です。");
    break;
  case 6:
  case 7:
  case 8:
    console.log("夏です。");
    break;
  case 9:
  case 10:
  case 11:
    console.log("秋です。");
    break;
  default:
    console.log("無効な月です。");
}

예시 2: 사용자 권한

let role = "editor";

switch (role) {
  case "admin":
    console.log("すべての権限があります。");
    break;
  case "editor":
    console.log("編集権限があります。");
    break;
  case "viewer":
    console.log("閲覧権限のみあります。");
    break;
  default:
    console.log("権限がありません。");
}

2. 연습 문제

문제 1: 평일/주말 판별기

주어진 요일이 평일인지 주말인지 판단하는 프로그램을 작성하세요.

문제 2: 쇼핑 카트 계산

상품 카테고리와 수량에 따라 총 비용을 계산하는 프로그램을 작성하세요.

문제 3: 전화 메뉴 시스템

사용자의 숫자 입력에 따라 옵션을 출력하는 프로그램을 작성하세요.

요약

이 연습 문제들을 활용해 switch 문 실력을 강화하세요.

9. 요약 및 향후 적용

이 글에서는 JavaScript switch 문에 대한 기본부터 고급 기술까지 포괄적으로 설명했습니다. 주요 내용과 향후 개선을 위한 다음 단계는 다음과 같습니다.

1. 핵심 정리

• 기본 문법 및 특징: case, break, default를 사용해 명확한 조건 로직을 작성합니다.
• if과의 비교: switch는 고정값에 적합하고, if는 복잡한 조건에 적합합니다.
• 오류 방지: break, 타입 검사, default를 활용해 버그를 예방합니다.
• 고급 기법: 중첩, 매핑, 동적 처리를 이용해 유연한 설계를 구현합니다.

2. 향후 적용 팁

1. 복잡한 조건 로직 최적화

여러 표현식과 함수를 결합해 동적 조건을 처리할 수 있습니다.

2. 매핑을 활용한 동적 처리 구현

객체나 Map을 사용해 효율적이고 확장 가능한 데이터 관리를 수행합니다.

const actions = {
  start: () => console.log("システムを起動します。"),
  stop: () => console.log("システムを停止します。"),
  restart: () => console.log("システムを再起動します。"),
};

let command = "restart";
(actions[command] || (() => console.log("無効なコマンドです。")))();

3. 상태 관리 시스템에 적용하기

Redux나 Vuex와 같은 상태 관리 라이브러리와 함께 switch를 활용할 수 있습니다.

요약

switch statement는 JavaScript 조건 로직에서 단순하면서도 강력한 도구입니다. 기본과 고급 사용법을 모두 이해함으로써 코드의 가독성과 유지보수성을 크게 향상시킬 수 있습니다.
이 기사를 기반으로 추가적인 기술 개발에 활용하세요.