JavaScriptで変数を宣言する方法には var
, let
, const
の3種類があります。
それぞれの違いを理解して使い分けることは、JavaScriptを扱う上でとても重要です。
この記事では、これら3つの違いを具体的なコードと一緒に、初心者にもわかりやすく解説します!
✅ 結論からざっくりまとめ!
宣言方法 | 再代入 | 再宣言 | スコープ | 巻き上げ(Hoisting) |
---|---|---|---|---|
var |
できる | できる | 関数スコープ | される(初期値はundefined ) |
let |
できる | できない | ブロックスコープ | されるがTDZにより使えない |
const |
できない | できない | ブロックスコープ | されるがTDZにより使えない |
💡 基本的には
const
を使い、必要に応じてlet
。var
は避けましょう。
🔍 var
の特徴
関数スコープ
var
で宣言した変数は、関数の中でしかスコープが制限されません。
function testVar() {
if (true) {
var message = 'hello';
}
console.log(message); // → 'hello'(if文の外でも使える)
}
再宣言できる
var a = 1;
var a = 2;
console.log(a); // → 2(エラーにならない)
巻き上げ(Hoisting)される
console.log(num); // → undefined(エラーではない)
var num = 10;
🔍 let の特徴
ブロックスコープ
letはブロック({})ごとにスコープが分かれます。
if (true) {
let value = 'block scoped';
}
console.log(value); // → ReferenceError(外からは見えない)
再宣言はできない
let x = 5;
let x = 10; // → エラー:Identifier 'x' has already been declared
Hoistingされるが「使えない」=TDZに注意
console.log(foo); // → ReferenceError
let foo = 'bar';
⏰ TDZ(Temporal Dead Zone)とは、「宣言されるまで変数が“死んでいる”状態」です。
🔍 const の特徴
基本的には let と同じだが、再代入できない
const PI = 3.14;
PI = 3.14159; // → TypeError
オブジェクトや配列の中身は変更可能
const arr = [1, 2, 3];
arr.push(4); // OK!
console.log(arr); // → [1, 2, 3, 4]
const obj = { name: 'Alice' };
obj.name = 'Bob'; // OK!
❗ constは「再代入できない」であって、「中身が不変」ではありません!
✅ どれを使うべき?
- const を基本に使う(変更しない変数)
- 変更が必要な場合は let を使う
- var は原則使わない(古いコードにはまだ残っている)
終わりに
ここまで読んでいただきありがとうございます。
javascriptは勉強を始めたばかりなので間違い等あればコメントで教えていただけますと幸いです。