はじめてのJavaScript⑥ 条件分岐-2 「switch」

##1. はじめに
本記事では、JavaScriptの
「switch」
について記載する。
##2. switchとは？
###概要
:::note
同値演算子(===)による、分岐に特化した条件分岐のこと。
:::
:::note
対象となる1つの値を様々な値と比較して一致しているかどうか調べたいときに便利。
:::
###構文

index.js

index.js

switch (式) {
  case 値1:
    //「式 === 値1」であるときに、実行したい処理を書く
  break; //ここでswitch文を抜ける意味
  case 値2:
    //「式 === 値2」であるときに、実行したい処理を書く
  break; //ここでswitch文を抜ける意味
  default:
    //式の値が、全ての値に合致しないときに実行したい処理を書く
  break;
}

※1:caseは複数設定可能。 ※2:case文は上から順に評価される。 ##3. 例題 :::note warn 変数nの値が1だったら、「数値は1です」とコンソールに表示。 ::: :::note warn 変数nの値が2だったら、「数値は2です」とコンソールに表示。 ::: :::note warn 変数nの値が3だったら、「数値は3です」とコンソールに表示。 ::: :::note warn 変数nの値が上記以外だったら、「範囲外です」とコンソールに表示。 ::: ###変数の定義 まずは、変数nに数値代入する。 今回は1を代入。

index.js

let n = 1;

###switch文の作成
変数nに数値を代入できたので、switch文を作成。

switch文

index.js

switch (n) {
  case 1:
    console.log('数値は1です');
    break;
  case 2:
    console.log('数値は2です');
    break;
  case 3:
    console.log('数値は3です');
  break;
  default:
    console.log('範囲外です');
  break;
}

結果は以下のように、  となるので、条件分岐としては成功していることがわかる。 ##4. if文とswitch文の違い 条件分岐として、if文と似てる部分があるかもしれないが、双方の違いとして

if文の特徴は、色々な条件パターンを書くことが出来る点

であり、

switch文は、ある特定のデータの値をチェックしたい場合に便利

ということ。
なので、条件分岐分としては全くの別物ということになる。
下記は違いについてのイラストである。

引用元:フルスタックエンジニアのノウハウのswitch文の記事

##5. おわりに
次項:はじめてのJavaScript⑦ 「条件分岐を用いた演習」へ続く。