【初心者向け】JavaScriptのvarとletの違いを徹底解説

JavaScriptで変数を宣言する方法は主に2つあります。「var」を使う方法と「let」を使う方法です。では、どのような場面でvarを使い、どのような場面でletを使えばよいのでしょうか。この記事では、両者の主な違いについてわかりやすく解説します。

スコープ(有効範囲)の違い

letとvarの最も大きな違いは「スコープ」にあります。letで宣言された変数のスコープは、その変数が宣言されたブロック内に限定されます。一方、varで宣言された変数はグローバルスコープを持ちます。つまり、varはブロックスコープに関係なく、変数をより広い範囲で定義するキーワードだと言えます。

windowオブジェクトへの登録の違い

letのスコープがブロック内に限定される点に加えて、もう一つ重要な特徴があります。letで宣言した変数は、たとえブロックの外で宣言されたとしても、グローバルなwindowオブジェクトには追加されません。その一方で、varでグローバルに定義された変数であれば、windowオブジェクト経由でアクセスすることが可能です。

使い分けのポイント

スコープが限定的であることを活かし、let変数はfor文やwhile文、if文のブロック内など、変数の使用範囲が狭いケースでよく使われます。一方、varは変数の値を頻繁に変更せず、プログラム全体から参照したい場合に適しています。

補足として、現代のJavaScript開発では、意図しないバグや名前の衝突を防ぐために、原則としてlet(またはconst)を使用することが推奨されています。

再宣言の可否の違い

さらに、varとletには「再宣言」に関する違いもあります。varで宣言した変数は、同じスコープ内で何度でも再宣言が可能ですが、letで宣言した変数を再宣言しようとするとエラーが発生します。

varとletの違いを示すサンプルコード

以下のコードは、実際の挙動の違いを示したものです。

let a = 'hello'; // グローバルスコープ(let)
var b = 'world'; // グローバルスコープ(var)
console.log(window.a); // undefined(windowに登録されない)
console.log(window.b); // 'world'(windowに登録される)

var a = 'hello';
var a = 'world'; // 問題なし。「'hello'」が上書きされる

let b = 'hello';
let b = 'world'; // SyntaxError: 識別子 'b' はすでに宣言されています

このように、letは安全に変数を管理できる一方で、varは柔軟性が高い反面、意図しない上書きのリスクがあります。用途に応じて正しく使い分けることが、品質の高いJavaScriptコードを書く第一歩となります。