switchと変数スコープ

JavaScriptでは、switchごとに変数スコープが作られます。

ts
switch (
  true // 変数スコープその1
) {
  default:
    switch (
      true // 変数スコープその2
    ) {
      default:
      // ...
    }
}

ts
switch (
  true // 変数スコープその1
) {
  default:
    switch (
      true // 変数スコープその2
    ) {
      default:
      // ...
    }
}

caseの変数スコープはない

caseごとには変数スコープが作られません。複数のcaseがある場合、switch全体で変数スコープを共有します。そのため、複数のcaseで同じ変数名を宣言すると実行時エラーが発生します。

ts
let x = 1;
switch (x) {
  case 1:
    const sameName = "A";
    break;
  case 2:
    const sameName = "B";
SyntaxError: Identifier 'sameName' has already been declared
    break;
}

ts
let x = 1;
switch (x) {
  case 1:
    const sameName = "A";
    break;
  case 2:
    const sameName = "B";
SyntaxError: Identifier 'sameName' has already been declared
    break;
}

TypeScriptでは、同じ変数名を宣言するとコンパイルエラーを出します。

ts
let x = 1;
switch (x) {
  case 1:
    const sameName = "A";
Cannot redeclare block-scoped variable 'sameName'.2451Cannot redeclare block-scoped variable 'sameName'.
    break;
  case 2:
    const sameName = "B";
Cannot redeclare block-scoped variable 'sameName'.2451Cannot redeclare block-scoped variable 'sameName'.
    break;
}

ts
let x = 1;
switch (x) {
  case 1:
    const sameName = "A";
Cannot redeclare block-scoped variable 'sameName'.2451Cannot redeclare block-scoped variable 'sameName'.
    break;
  case 2:
    const sameName = "B";
Cannot redeclare block-scoped variable 'sameName'.2451Cannot redeclare block-scoped variable 'sameName'.
    break;
}

caseに変数スコープを作る方法

caseに変数スコープを作るには、中カッコでcase節を囲みます。

ts
let x = 1;
switch (x) {
  case 1: {
    const sameName = "A";
    break;
  }
  case 2: {
    const sameName = "B";
    break;
  }
}

ts
let x = 1;
switch (x) {
  case 1: {
    const sameName = "A";
    break;
  }
  case 2: {
    const sameName = "B";
    break;
  }
}

こうすると、JavaScriptの実行時エラーも、TypeScriptのコンパイルエラーも発生しなくなります。

学びをシェアする

🌏JavaScriptのswitchは全体で1つの変数スコープ
😕caseレベルのスコープはない

もしも複数のcaseで同じ変数名を宣言すると…
🔥JavaScript → 実行時エラー
⛔️TypeScript → コンパイルエラー

✅caseに{}を書くと固有のスコープが作れる

『サバイバルTypeScript』より

この内容をツイートする