switch文は時にifより読みやすい。その辺は感覚で選べばいいと思う。

switch文はそのままだと「caseにマッチしたところから処理を開始する」だけなので、breakを書かないと下に書いてある処理を全部実行する。以下は例。

breakを書いた場合

マッチした3の場合の処理だけを行い、switch文を抜ける。

const num = 3;

switch (num){
  case 1:
    console.log("1");
    break;
  case 2:
    console.log("2");
    break;
  case 3:
    console.log("3");
    break;
  case 4:
    console.log("4");
    break;
  case 5:
    console.log("5");
    break;
}
// 3

breakを書かない場合

マッチした3のcaseから処理が始まるが、breakが書いてないのでswitchを抜けず、下の処理も行う。

const num = 3;

switch (num){
  case 1:
    console.log("1");
  case 2:
    console.log("2");
  case 3:
    console.log("3");
  case 4:
    console.log("4");
  case 5:
    console.log("5");
}
// 3
// 4
// 5

ESlintのno-case-declarationsとcaseのブロックスコープ

ES-lintにno-case-declarationsというルールがある。

以下のようにcaseの中で変数を宣言するなというルール。

なぜならswitchブロック内からアクセスできてしまうから。

const res = { type: 'heartRate', message: '70' }
switch (res.type) {
  case 'temperature':
    // TODO
    break
  case 'heartRate':
    const __heartRate = Number(res.message)
    console.log(__heartRate
    break
}

以下のようにブロックスコープの中に入れると良い。

const res = { type: 'heartRate', message: '70' }
switch (res.type) {
  case 'temperature': {
    // TODO
    break
  }
  case 'heartRate': {
    const __heartRate = Number(res.message)
    console.log(__heartRate
    break
  }
}