【JavaScript】switch文の使い方について（条件分岐の基本）

はじめに

今回は、JavaScriptで「switch文」について勉強したことを記載していきたいと思います。

　

switch文

switch文とは

JavaScriptにおける switch文 は、複数の条件に応じて異なる処理を実行したいときに使用する分岐構文です。If文 でも同様の処理は可能ですが、値の一致を条件とした分岐には switch の方が読みやすく、整理されたコードになります。

　

構文

switch (値) {
  case 条件1:
    // 条件1に一致したときの処理
    break;  // switch文を抜ける
  case 条件2:
    // 条件2に一致したときの処理
    break;  // switch文を抜ける
  default:
    // どの条件にも一致しなかったときの処理
}

　

例

let fruit = "apple";

switch (fruit) {
  case "banana":
    console.log("バナナです");
    break;
  case "apple":
    console.log("リンゴです");　// 「リンゴです」と表示される
    break;
  case "orange":
    console.log("オレンジです");
    break;
  default:
    console.log("不明なフルーツです");
}

　

breakについて

switch文は、条件に一致した条件以降に記載される処理をすべて処理するため「break」を記載しないと不要な処理を実行してしまう可能性があります。条件に一致した処理のみ実施したい場合は、必ずbreakを記載しましょう。逆を言うと「break」 を書かないと、後続の case もすべて実行されます。

let fruit = "apple";

switch (fruit) {
  case "banana":
    console.log("バナナです");
    break;
  case "apple":
    console.log("リンゴです");　// 「リンゴです」と表示される
  case "orange":
    console.log("オレンジです"); // 「オレンジです」と続けて表示される
}

　

defaultについて

defaultは、記載した箇所より上部の条件に一致しない場合の処理を記載することができます。必ずしも一番最後に定義する必要はありません。

let fruit = "app";

switch (fruit) {
  case "banana":
    console.log("バナナです");
    break;
  case "apple":
    console.log("リンゴです");
    break;
  case "orange":
    console.log("オレンジです");
    break;
  default:
    console.log("不明なフルーツです"); 　// 「不明なフルーツです」と続けて表示される
}

　

複数のcaseで同じ処理を行う

let day = "土曜日";

switch (day) {
  case "土曜日":
  case "日曜日":
    console.log("週末です"); 
    break;
  default:
    console.log("平日です");
}

　

最後に

JavaScriptの環境構築は、この記事を参照してみてください。
【JavaScript】VSCodeでJavaScriptを使用するための環境構築を実施する – SEもりのLog JavaScript

以上、ログになります。
これからも継続していきましょう！！