javascriptでの変数の宣言方法による違い

Posted at 2025-01-03

javascriptでの変数の宣言方法による違いをまとめておきます。letやらvarやらです。
宣言、普段なんとなくやっちゃうんですが、大事ですよね。

1. `let`

スコープ: ブロックスコープ（if文やfor文などのブロック内でのみ有効）
再代入: 可能（変数の値を変更できる）
再宣言: できない（同じスコープ内で再宣言を試みるとエラー）
巻き上げ: 巻き上げはされるが、一時的死角（TDZ）があるため、宣言前にアクセスするとエラーになる
グローバルオブジェクトへの追加: しない（グローバルスコープでletで宣言した場合、windowやglobalオブジェクトにプロパティとして追加されない）

let x = 10;
x = 20;  // 再代入は可能
console.log(x);  // 20

const y = 30;
y = 40;  // エラー：再代入できない

スコープ: 関数スコープ（関数内でのみ有効。関数外でvarを使うとグローバルスコープになる）
再代入: 可能（letと同様に値を変更できる）
再宣言: 可能（同じスコープ内で再宣言してもエラーにはならない）
巻き上げ: 巻き上げが起き、変数は宣言されるが初期化されないため、宣言前にアクセスするとundefinedになる
グローバルオブジェクトへの追加: する（グローバルスコープでvarで宣言した場合、windowやglobalオブジェクトにプロパティとして追加される）

var z = 50;
var z = 60;  // 再宣言が可能
console.log(z);  // 60

x = 70;  // 宣言なしで代入
console.log(x);  // 70

特性	`let`	`const`	`var`	何もなし（宣言なし）
スコープ	ブロックスコープ	ブロックスコープ	関数スコープ	グローバルスコープ
再代入	可能	不可	可能	可能
再宣言	不可	不可	可能	可能
巻き上げ	一時的死角（TDZ）	一時的死角（TDZ）	初期化されず、`undefined`になる	なし
グローバルオブジェクト追加	しない	しない	する	する

let と const は、どちらもブロックスコープで、スコープ内での変数管理をより厳密に行いたい場合に使う。constは値が変更されない定数を宣言する場合に使う。
var は、古いコードや関数スコープで動作する必要がある場合に使わるが、現代のJavaScriptではletやconstを使用することが推奨さる。
変数を宣言しない場合（何もなし）は、グローバルスコープに変数が追加されてしまう。予期しないバグやセキュリティ問題を引き起こす可能性があるため、避けた方がよい。