switch

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

式を評価し、式の値とマッチしたcase句の処理文を実行します。

文法

switch (expression) {
  case value1:
    // 式(expression)の結果がvalue1にマッチした際に実行される処理文です。
    statements1
    [break;]
  case value2:
    // 式(expression)の結果がvalue2にマッチした際に実行される処理文です。
    statements2
    [break;]
  ...
  case valueN:
    // 式(expression)の結果がvalueNにマッチした際に実行される処理文です。
    statementsN
    [break;]
  default:
    // 式(expression)の値がどれにもマッチしなかった際に実行される処理文です。
    statements_def
    [break;]
}

expression: 各case句に対してマッチさせる式を指定します。
case valueN: expressionに対してのマッチに使用されるcase句を指定します。
statementsN: expressionにマッチしたcase句に関連付いて実行される処理文です。
statements_def: expressionが、どのcase句にもマッチしなかった際に実行される処理文です。

説明

マッチするものが見つかると、プログラムは関連付けられている処理文を実行します。もし提供された値が複数のcaseでマッチする場合は、たとえ各caseが等価では無いとしても、最初にマッチしたcaseが選択されます。

プログラムはまずexpressionに入力された式と同じ値として評価される(厳格な比較に===を使用)case句を探し、そこに制御を移して、関連付けられている処理文を実行します。マッチするcase句が無ければ、プログラムは任意で指定することが出来るdefault句を探し、それが存在すれば制御をそこに移し、関連する処理文を実行します。もし、default句が見つからない場合、プログラムはswitch文の後に続く処理文の実行を続けます。慣習として、default句は最後に書かれますが、必ずそのようにする必要はありません。

各caseに関連付けられる任意のbreak文は、マッチした処理文が実行されるとswitchの外へプログラムが抜けて、 switchの後に続く処理文の実行を続行することを確約します。もし、breakが省略されると、プログラムはswitch内の次の処理文の実行を続行します。

例

switchの使用例

下記の例は、exprが"Bananas"と評価されると、プログラムは"Bananas"の値にマッチするcase句を見つけ、それに関連付く処理文を実行します。 breakに行き着いた際は、プログラムはswitchの外に抜けて、 switchの後に続く処理文を実行します。もし、breakが省略されると、その下のcase "Cherries"の処理文も実行されてしまいます。

switch (expr) {
  case "Oranges":
    console.log("Oranges are $0.59 a pound.");
    break;
  case "Apples":
    console.log("Apples are $0.32 a pound.");
    break;
  case "Bananas":
    console.log("Bananas are $0.48 a pound.");
    break;
  case "Cherries":
    console.log("Cherries are $3.00 a pound.");
    break;
  case "Mangoes":
  case "Papayas":
    console.log("Mangoes and papayas are $2.79 a pound.");
    break;
  default:
    console.log("Sorry, we are out of " + expr + ".");
}

console.log("Is there anything else you'd like?");

例: もしbreakを忘れてしまうと、何が起こるのか?

もし、breakを忘れた場合、スクリプトは条件が満たされている場所から実行を始め、その後は条件を満たしているいないに関わらず実行が続きます。下記の例を参照してください。

var foo = 0;
switch (foo) {
    case -1:
        console.log('negative 1');
        break;
    case 0: // fooが0であれば、ここで条件が満たされ、このブロックが実行されます。
        console.log(0)
        // 注目!: ここでbrekaが忘れられています。
    case 1: // 'case 0:'でのbreka文が無いため、同様にこのcaseの処理文も実行されます。
        console.log(1);
        break; // このbureakに行き着くため、'case 2:'の実行は行われません。
    case 2:
        console.log(2);
        break;
    default:
        console.log('default');
}

例: 複数の条件を満たす書き方

もし、1つのcase部分に複数の条件を満たせるようにしたいのであれば、それには2つの方法があります。方法(1)は推奨される方法であり、方法(2)は"ハッカー的な(? hacky)"方法です。この2つの方法で、fooの値が0、1、2、3のいずれかの場合に、"yes"の警告ダイアログを表示してみます。

これらのテクニックは、下記がリンク先が元になっています。

方法(1)

この方法は、case文の下にbrekeが無ければ、条件を満たす満たさないに関係なく次のcase文の実行続けるという動きを利用します。このページの「例: もしbreakを忘れてしまうと、何が起こるのか?」を参照してください。

var foo = 1;
switch (foo) {
    case 0:
    case 1:
    case 2:
    case 3:
        alert('yes');
        break;
    default:
        alert('not');
}

方法(2)

これは"ハッカー的な"方法です。 2行目がswitch(foo)の代わりに、常にtrueであることに注目してください。そして、条件のロジック(不変のtrueの代わりとなる)はcase文に置かれます。

var foo = 1;
switch (true) { // 変数fooの代わりに常にTRUE
    case foo >= 0 && foo <= 3:
        alert('yes');
        break;
    default:
        alert('not');
}

仕様

ブラウザ互換性

デスクトップ
機能	Chrome	Firefox (Gecko)	IE	Opera	Safari
基本	◯	◯	◯	◯	◯

モバイル
機能	Android	Chrome for Android	Firefox Mobile	IE Mobile	Opera Mobile	Safari Mobile
基本	◯	◯	◯	◯	◯	◯