メインコンテンツまでスキップ

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』より

この内容をツイートする
  • 質問する ─ 読んでも分からなかったこと、TypeScriptで分からないこと、お気軽にGitHubまで🙂
  • 問題を報告する ─ 文章やサンプルコードなどの誤植はお知らせください。