【JavaScript】条件分岐② switch【自己学習】

##switchでできること
ifと同じく、複数の条件によって処理を分岐させたい場合に用いる。

##switchの書き方

switch-1.js

const rank = "A";
switch (rank) {
  case "A":
    console.log("あなたはAランクです");  // > あなたはAランクです
    break;
  case "B":
    console.log("あなたはBランクです");
    break;
  case "C":
    console.log("あなたはCランクです");
    break;
  default :
    console.log("あなたはランク外です");
    break;
}

switch()内の定数rankの値がcaseの値のいずれかと一致した場合、一致したcaseで指定した処理を実行される。

上記のコードの場合は定数rankの値はAであり、一番上のcaseの値と一致することから、コンソール上では「あなたはAランクです」と表示される。caseの値のいずれにも一致しなかった場合は、defaultを使うとこで処理を指定できる（省略可）。

####breakは必須
ifとは異なり、switchは最初に条件を満たした処理が実行された時点で終了せず、それ以降の処理が続けて実行されてしまう。

switch-2.js

const rank = "B";
switch (rank) {
  case "A":
    console.log("あなたはAランクです");
  case "B":
    console.log("あなたはBランクです");  // > あなたはBランクです
  case "C":
    console.log("あなたはCランクです");  // > あなたはCランクです
  default :
    console.log("あなたはランク外です");  // > あなたはランク外です
}

上記のコードでは上から2番目のcaseの値が一致し、コンソール上で「あなたはBランクです」と表示されるが、breakが書かれていないため、値が一致していないそれ以降の処理も実行され「あなたはCランクです」「あなたはランク外です」も続けて表示されてしまう。

このような表示を避け、一致した値に対応した処理のみを実行するには、それぞれの処理の直後にbreakを記述して命令を終了させる必要がある。

####caseの値は同値演算子で比較されている
switch()内の値とcaseの値が一致しているかの判定は、等価演算子（==）ではなく同値演算子（===）で行われている。

switch-3.js

const i = "1";
switch (i) {
  case 1:
    console.log("値が一致しています");
    break;
  default :
    console.log("値が一致していません");  // > 値が一致していません
}

switch()内の値は文字列の"1"に対してcaseの値は数値の1という違いがあり、同値演算子ではこれらを異なる値としてみなすため、caseで指定した処理ではなくdefaultで指定した処理が実行されてしまう。

##ifとの使い分け方
先述から、switchはifと比較し下記のメリットとデメリットがある。
######　メリット
　・条件式を記述しないので、シンプルでわかりやすいコードになる
######　デメリット
　・同値演算子でしか値を比較できない

そのため、同値演算子のみで条件分岐できる場合はswitch、できない場合はifを使うのが望ましいと考えられる。