JavaScript switch文のサンプル

JavaScriptのswitch文のサンプルです。条件で処理を分岐する時に使用します。

目次 switch文とは
switch文のサンプル
  breakがない場合(フォールスルー)
  switch文の中でif文を使用する

switch文とは

switch(式){
  case 値 :
    処理
    break;
   ・・・
  default:
    処理
    break;
}
  • 式の結果とcaseの値が一致すれば、配下の処理が実行されます。
    比較は、===演算子で行うので値と型が一致する必要があります。
    数値型と文字列型の比較では一致しません。
  • breakでswitch文を抜けます。breakがないと下の判定(case/default)に行ってしまいます。
  • defaultは、条件の値がどのcaseの値にも一致しない時に実行されます。省略可能ですが書いたほうが良いです。
  • 以下はMDNのswitch文のリンクです。
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/switch

switch文のサンプル

<script>
    const a = "2";

    switch (a) {
        case "1":
            console.log("1つめ");
            break;
        case "2":
            console.log("2つめ"); // 2つめが出力される
            break;
        default:
            console.log("3つめ");
            break;
    }
</script>

2行目は、変数aに値をセットしています。
4行目からswitch文が始まります。
8行目のcase "2"は変数aの値と一致するのでその配下の処理が実行されます。
9行目の処理が実行されます。
10行目のbreakでswitch文を抜けます。

breakがない場合(フォールスルー)

<script>
    const a = "1";

    switch (a) {
        case "1":
            console.log("1つめ"); // 1つめが出力される

        case "2":
            console.log("2つめ"); // 2つめが出力される
            break;
        default:
            console.log("3つめ");
            break;
    }
</script>

7行目は、breakがありません。
5行目のcase "1"の処理の後、8行目のcase"2"の処理も実行されます。
フォールスルー(fall through/落ちる)と呼ばれます。
breakを書き忘れたのかわかりづらいので使用しないほうが良いです。

switch文の中でif文を使用する

<script>
    const a = 3;

    switch (a) {
        case 3:
            if (a % 2 == 0) {
                console.log("偶数");
            } else {
                console.log("奇数"); // 奇数が出力される
            }
            break;
        default:
            console.log("その他");
            break;
    }
</script>

6行目はswitch文の中のcaseの後にif文を使用しています。
%は、割り算の余りを求めます。

関連の記事

[JavaScript] if文のサンプル
JavaScript for文のサンプル(break/continue)
JavaScript while文とdo while文のサンプル
JavaScript constとletとvarの違い

△上に戻る