【JavaScript】switch文 - 条件分岐（処理の分岐）

JavaScriptのswitch文（条件分岐）をご紹介します。

switch文

switch文は条件分岐の記法です。
変数の値に応じて処理を分岐します。

一般的にswitch文はbreak文と合わせて使います。
ここではしっかり理解するため、swtich文単体の使い方とbreak文を合わせた使い方をご紹介します。

switch文（単体）

基本構文

switch( 変数 ) {
    case 条件値1:
        // 処理........
    case 条件値2:
        // 処理........
    case 条件値3:
        // 処理........
    default:
        // 処理........
}

先頭のcaseから順番にswitch( 変数 )の丸括弧内の変数と条件値が等しいか判定し、等しい場合それ以降の処理を全て実行します。
そのため、１つ目のcaseが真となった場合、以降のcaseの真偽に関わらず、各処理が実行対象です。

また、defautは処理が到達した時点で実行します。

サンプル

Sample

let moji = "C";

switch( moji ) {
    case "A":
        console.log("moji : A");
    case "B":
        console.log("moji : B");
    case "C":
        console.log("moji : C");
    case "D":
        console.log("moji : D");
    default:
        console.log("moji : UNKNOWN");
}

Console

moji : C
moji : D
moji : UNKNOWN

変数mojiの値はCで、３つ目のcaseの条件値と等しいため、それ以降の処理を全て実行します。

また、いずれの条件値にも等しくない場合は、defaultの処理のみ実行します。

Sample

let moji = "X";

switch( moji ) {
    case "A":
        console.log("moji : A");
    case "B":
        console.log("moji : B");
    case "C":
        console.log("moji : C");
    case "D":
        console.log("moji : D");
    default:
        console.log("moji : UNKNOWN");
}

Console

moji : UNKNOWN

switch文（+break文）

switch文の一度条件値にヒットしたら以降の処理を全て実行する特徴を有効活用できるケースもありますが、少し使いづらいため、一般的にはbreak文を合わせて使用します。

基本構文

switch( 変数 ) {
    case 条件値1:
        // 処理........
        break;
    case 条件値2:
        // 処理........
        break;
    case 条件値3:
        // 処理........
        break;
    default:
        // 処理........
}

各caseの処理の一番最後にbreak文を定義します。

break文

break文はブロックを制御する仕組みです。
ブロックとは波括弧のことで、条件分岐や繰り返し処理で使用します。
break文が実行されると一番近いブロックから抜け出して次の処理へ移ります。

サンプル

Sample

let moji = "C";

switch( moji ) {
    case "A":
        console.log("moji : A");
        break;
    case "B":
        console.log("moji : B");
        break;
    case "C":
        console.log("moji : C");
        break;
    case "D":
        console.log("moji : D");
        break;
    default:
        console.log("moji : UNKNOWN");
}

Console

moji : C

変数mojiの値はCで、３つ目のcaseの条件値と等しいため、console.log("moji : C");を実行します。
次にbreakがあるため、ブロックを抜け出すので、以降のcaseやdefaultの処理は実行されません。

if文とswitch文の使い分け

if文とswitch文は条件分岐という意味では同じ処理を実現できます。
一般的にはif文が多く使われますが、『1つの変数の値によって、処理を分岐したい』場合はswitch文の方が、綺麗にコードを記述することができます。

例えば上記のサンプルをif文で定義すると次のようになります。

ソースコード

let moji = "C";

if( moji == "A" ) {
    console.log("moji : A");
} else if( moji == "B" ) {
    console.log("moji : B");
} else if( moji == "C" ) {
    console.log("moji : C");
} else if( moji == "D" ) {
    console.log("moji : D");
} else {
    console.log("moji : UNKNOWN");
}

Console

moji : C

if文の条件式は自由度が高いため、一見して変数mojiの値に対する条件であることが分かりづらいです。
このように変数の値に対して条件分岐する場合はswitch文の方が簡潔にできる場合があります。