たるだめ

のんびりとなんか書きます

【JS】switchのブロックについて

switchのスコープの注意事項

JS のswitch文のcase内で同じ変数名をconst、letで宣言するとエラーになる

以下のコードはeslintを実行するとerror Parsing error: Identifier 'hoge' has already been declaredになります。(lintしなくてもJSでもTS2451エラーにはなりますね)

const num = 0;
switch (num) {
  case 1:
    const hoge = 'hoge';
    break;
  default:
    const hoge = 'hoge';
    break;
}

switchのブロック内に変数hogeが存在するので、再宣言はできません。

見たままですが、case節はブロックじゃないので、上記のエラーになります。

まぁvarだとエラーにならないですが、

ブロックステートメントにしてスコープを絞る

case節の処理を{}でブロックに入れてしまえば参照できなくなるので問題なくなります。

switch (num) {
  case 1: {
    const hoge = 'hoge';
    break;
  }
  default: {
    const hoge = 'hoge';
    break;
  }
}

ブロックにしないとエラーになるESLintルールがある

下記コードは、no-case-declarationsエラーとなります。

switch (num) {
  case 1:
    const hoge = 'hoge';
    break;
  default:
    console.log(hoge);
    break;
}

switchブロック内で宣言していますが、caseを通った時に割り当てられるため、宣言したcase外では参照できないからですね。(と理解しました。 )

実際エディタ上では、caseの中で宣言した変数がdefaukt内から参照できるかのような感じになってます。

(実行するとエラーになります。)

no-case-declarations

このエラーが出るのはconst、let、function、classを宣言したときです。

参考