基本の文法と違い
| 特徴 | var | let | const |
|---|---|---|---|
| 再宣言 | 可能 | エラーになる | エラーになる |
| 再代入 | 可能 | 可能 | ❌ できない |
| スコープ | 関数スコープ | ブロックスコープ | ブロックスコープ |
| 巻き上げ | される（undefined） | されるが参照エラーになる | されるが参照エラーになる |
| 初期化 | 後で可 | 後で可 | 宣言時に初期化必須 |
1. スコープの違い（最も重要）
🔹 var は「関数スコープ」
- 関数内で宣言されたら、関数全体で有効
- ブロック
{}内で宣言しても、その外でもアクセスできる
function testVar() {
if (true) {
var a = 100;
}
console.log(a); // ✅ 100 → if ブロックの外でも使える
}
testVar();🔹 let / const は「ブロックスコープ」
- ブロック
{}ごとに変数のスコープが限定される
function testLetConst() {
if (true) {
let b = 200;
const c = 300;
}
console.log(b); // ❌ エラー
console.log(c); // ❌ エラー
}2. 再宣言の違い
var x = 10;
var x = 20; // ✅ 問題なし
let y = 10;
let y = 20; // ❌ エラー：再宣言できない
const z = 30;
const z = 40; // ❌ エラー：再宣言できない3. 再代入の違い
let a = 1;
a = 2; // ✅ OK
const b = 1;
b = 2; // ❌ エラー：再代入できないただし、constでオブジェクトを宣言した場合、プロパティの変更はOK！
const person = { name: "Alice" };
person.name = "Bob"; // ✅ OK！中身の変更はできる4. 巻き上げ（ホイスティング）の違い
- JavaScriptでは、変数の宣言が関数やスコープの先頭に「巻き上げられる」
varの場合 → 変数が「undefined」で初期化されているlet/const→ 巻き上げはされるが、使う前にアクセスするとエラー
console.log(x); // undefined
var x = 10;
console.log(y); // ❌ ReferenceError
let y = 20;
console.log(z); // ❌ ReferenceError
const z = 30;5. 宣言なしの代入（非推奨！）
function test() {
undeclaredVar = 123;
}
test();
console.log(undeclaredVar); // ✅ グローバル変数として存在してしまう（危険）これはバグの原因になりやすい。
解決策："use strict"; モードを使うとエラーになる。
"use strict";
undeclaredVar = 123; // ❌ ReferenceError6. どれを使うべき？
現代の推奨ルール（ベストプラクティス）
varは使わない（予期しない動作を避けるため）- 基本は
const（不変の変数を使うことでバグ防止） - 再代入が必要なら
let
const name = "Alice"; // 基本は const
let count = 0; // 再代入するなら let7. 使い分けの例：ループ内のスコープ
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100);
}
// 出力: 3, 3, 3（varは関数スコープだから）
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100);
}
// 出力: 0, 1, 2（letはブロックスコープだから）まとめ
| 目的 | 推奨するキーワード |
|---|---|
| 値が変わらない定数 | const |
| 値を変更する変数 | let |
| レガシーな互換性のみ | var（非推奨） |
