JavaScript switch: case と default の分岐
JavaScript の switch 文は式を 1 回だけ評価し、厳密等価 (===) で一致する case ラベルへ実行を分岐します。すべての分岐が同じ変数を離散的な値で判定する場合は、if...else の連鎖を switch に置き換えると見通しがよくなります。コマンドのディスパッチ、ステータスのマッピング、固定オプションの処理のような場面に向いています。switch は値ベースの制御フローを 1 つのブロックにまとめ、break でフォールスルーを明示的に制御できます。
値で分岐する JavaScript switch の例
出力:
ここに出力が表示されます...
出力:
ファイルを保存中
この例の仕組み
switch (command)はcommandを 1 回評価し、結果をソース順で各 case ラベルと比較します。"保存"の case が一致するため、その分岐へジャンプしてconsole.log("ファイルを保存中")を実行します。breakは switch ブロックを終了します。これがない場合、次のラベルが一致していなくても後続の case 本体へフォールスルーします。defaultはキャッチオールとして機能し、どの case ラベルにも一致しないときに実行されます。defaultが最後にある場合、後ろにbreakは不要です。
case "保存": のような JavaScript の case 文では、ラベルは一致させる値であり、独立した真偽条件ではありません。
JavaScript switch case でよくある間違い
break を忘れる: 省略すると、その後ろのすべての case 本体にフォールスルーします。意図的に case を束ねるとき以外は break を入れてください。
const command = "保存";
switch (command) {
// 悪い例: command が "保存" のとき両方のメッセージを出力する
case "保存":
console.log("保存中");
case "閉じる":
console.log("終了中");
}
case ラベルで型を混在させる: switch は === を使うため、"2" と 2 は一致しません。switch に渡す式は、事前に一貫した型へそろえてください。
case 間で let/const を再宣言する: すべての case は同じ switch ブロックスコープを共有します。2 つの case で let result を宣言すると SyntaxError になります。case ごとに { } で囲んで個別のレキシカルスコープを作ってください。
switch と if…else の使い分け
switch を使う場面 | if...else を使う場面 |
|---|---|
| 1 つの式を複数の固定値と比較する | 条件が範囲・不等号・別変数を含む |
| フォールスルーで複数 case を同じ処理へまとめる | 各分岐が独立した複合ロジックを持つ |
値と処理の対応が大きくなる場合は、どちらよりもオブジェクト参照のほうが明確になることがあります。キーが存在しないケースをガードしないと、undefined を関数として呼び出してしまいます。
その他の例
複数の case ラベルをまとめて 1 つの処理にする:
const day = "土";
switch (day) {
case "土":
case "日":
console.log("週末");
break;
default:
console.log("平日");
}
case ラベルの間に break を置かずに並べると、列挙したすべての値を同じブロックへルーティングできます。共通ハンドラーは短く保ち、末尾で break、return、throw のいずれかで終了してください。そうしないと後続 case を誤って実行します。
ラベルごとに異なる挙動が必要な場合は、フォールスルーを避けて各 case に独立した本体と終了処理を用意してください。
FAQ
JavaScript の switch は == と === のどちらを使いますか?
switch は厳密等価 (===) で比較します。型変換は行われないため、0 と "0"、null と undefined は一致しません。式と case ラベルの型をそろえてください。
switch の case で break を省略するとどうなりますか?
ラベルの一致有無にかかわらず、次の case 本体へフォールスルーします。これは break、return、または switch ブロックの終端まで続きます。意図的なフォールスルーは、複数の case ラベルを 1 つの処理へ束ねるときに使います。
default はほかの case より前に置けますか?
はい。default は switch ブロック内のどこに置いても構いません。一致する case がない場合だけ実行され、その位置から後続へ処理が続くため、最後に置かない場合は default の後にも break を入れてください。