JavaScript における var と let の違い
JavaScript では、変数を宣言する際に var、let、const のいずれかのキーワードを使用します。その中でも、var と let はどちらも変数を宣言するために使用されますが、いくつかの重要な違いがあります。
スコープの違い
var と let の最も大きな違いは、そのスコープです。
varは関数スコープです。 関数内でvarを使用して宣言された変数は、その関数全体でアクセス可能です。letはブロックスコープです。 ブロック (if文やfor文など) 内でletを使用して宣言された変数は、そのブロック内でのみアクセス可能です。
スコープの比較表
| キーワード | スコープ |
|---|---|
| var | 関数スコープ |
| let | ブロックスコープ |
関数スコープの例
<script>
function myFunction() {
if (true) {
var x = 10; // 関数スコープ
}
console.log(x); // 10 と出力される
}
myFunction();
console.log(x); // エラー！x は関数スコープ内でのみアクセス可能
</script>
上記の例では、var を使用して変数 x が宣言されています。x は if 文の内部で宣言されていますが、var は関数スコープを持つため、if 文の外側でもアクセスすることができます。
ブロックスコープの例
<script>
function myFunction() {
if (true) {
let y = 20; // ブロックスコープ
}
console.log(y); // エラー！y は if ブロック内でのみアクセス可能
}
myFunction();
</script>
上記の例では、let を使用して変数 y が宣言されています。y は if 文の内部で宣言されており、let はブロックスコープを持つため、if 文の外側からはアクセスできません。
巻き上げの違い
var と let のもう一つの違いは、変数の巻き上げに関係します。
varは巻き上げられます。varを使用して宣言された変数は、そのスコープの先頭に「巻き上げられる」ため、宣言前に参照することができます。ただし、初期化は行われないため、参照時にはundefinedとなります。letは巻き上げられません。letを使用して宣言された変数は、宣言前に参照することはできません。
var の巻き上げの例
<script>
console.log(a); // undefined と出力される
var a = 10;
</script>
上記の例では、var を使用して宣言された変数 a は、宣言前に参照されています。var は巻き上げられるため、エラーとはならず undefined と出力されます。
let の巻き上げの例
<script>
console.log(b); // エラー！Cannot access 'b' before initialization
let b = 20;
</script>
上記の例では、let を使用して宣言された変数 b は、宣言前に参照されています。let は巻き上げられないため、エラーが発生します。
変数の再宣言
var と let では、変数の再宣言に関する挙動も異なります。
varは再宣言が可能です。 同じスコープ内でvarを使って変数を再度宣言することができます。letは再宣言が禁止されています。 同じブロック内でletを使って変数を再度宣言するとエラーが発生します。
var の再宣言の例
<script>
var x = 10;
var x = 20; // 再宣言可能
console.log(x); // 20 と出力される
</script>
let の再宣言の例
<script>
let y = 10;
// let y = 20; // エラー！y は既に宣言されています
console.log(y); // 10 と出力される
</script>
まとめ
var と let はどちらも変数を宣言するために使用されますが、スコープや巻き上げの挙動が異なります。
- 関数全体でアクセス可能な変数を宣言する場合は
varを使用します。 - ブロック内でのみアクセス可能な変数を宣言する場合は
letを使用します。
一般的に、新しい JavaScript コードでは let を使用することが推奨されます。let を使用することで、コードの可読性が向上し、予期せぬエラーを防ぐことができます。
参考資料
よくある質問
Q1: var はもう使わないほうが良いですか？
A1: 可能な限り let や const を使用することが推奨されます。var は古い仕様であり、スコープの広さが予期せぬエラーを引き起こす可能性があります。
Q2: let と const の違いは何ですか？
A2: let は再代入可能な変数を宣言するために使用し、 const は再代入不可能な定数を宣言するために使用します。
Q3: ブロックスコープを使うメリットは何ですか？
A3: ブロックスコープを使用することで、変数のスコープを限定し、コードの可読性と保守性を向上させることができます。また、変数の意図しない変更を防ぐことにも役立ちます。
その他の参考記事:JavaScriptのletとconst