ともブロ。

Rails, Vue.js, React.js, JavaScript等、日々学んだ技術・知識を備忘録的に記していきます。

【JavaScript】switch文による条件分岐について

JSのswitch文についてのメモ。

条件分岐というと、通常if文が用いられているが、switch文を用いた方がスマートに見える場合も多い。

使用例として、今回は3色(金銀白)おみくじで使用してみる。

例1

const omikuji = "silver";
switch(omikuji) {
    case "gold":
        console.log("世界一周旅行券")
    break;
    case "silver":
        console.log("世界一周旅行券")
 break;
    case "white":
        console.log("ティッシュ")
    break;

if文を使うと以下の通り

例2

if (omikuji === 'gold'){
  console.log('世界一周旅行券');
}else if (omikuji === 'silver'){
  console.log('世界一周旅行券');
}else{
  console.log('ティッシュ');
}

比べると、条件分岐と演算子が多い場合、switchを使用した方が可読性が高くスマートに見える。

注意点

switch文で条件分岐させる場合、必ずcase句の最後にbreakを記述する。

そうしないと、switch文の最後まで実行されてしまいバグになる為、基本的にcaseとbreakはセットで使うもの覚える。

defaultについて

defaultをswitch文に組み込むことで、例1で言うと金銀白どの色にも該当しなかった場合(赤)の条件も分岐させることができる。

例3

const omikuji = "silver";
switch(omikuji) {
    case "gold":
        console.log("世界一周旅行券")
    break;
    case "silver":
        console.log("世界一周旅行券")
 break;
    case "white":
        console.log("ティッシュ")
    break;
    default "red":
        console.log("ハズレです")
)

defaultは通常switch文の最後で書くため、breakを記述する必要がない(以下に続くコードがないため)。