プログラミング

JavaScriptの var 完全ガイド

最終更新： 26/03/2025
1 分の読み

JavaScriptにおけるvarキーワードは、長い間、変数の宣言に使用されてきました。しかし、近年では、より強力で予測可能な方法としてletやconstが推奨されています。それにもかかわらず、varは今でも多くのコードベースで使用されており、その挙動や歴史について理解しておくことは非常に重要です。この記事では、varについて深く掘り下げ、使用方法やその問題点、そしてletやconstとの違いについて解説します。

1. varの基本的な使用方法

varは、JavaScriptで変数を宣言するためのキーワードで、非常にシンプルに変数を定義できます。例えば、次のように書きます。

関連記事
javascript
var message = "Hello, World!";
console.log(message);

上記のコードでは、varを使ってmessageという変数を宣言し、その値に「Hello, World!」を代入しています。console.logでその値を表示すると、コンソールに「Hello, World!」が表示されます。

2. varのスコープ

varの重要な特徴の一つは、スコープです。varで宣言された変数は、関数スコープに限定されます。つまり、関数内で宣言された場合、その変数は関数外からはアクセスできませんが、関数外で宣言された場合はグローバルにアクセスできます。この挙動は、letやconstとは異なります。

関数スコープ

javascript
function testVar() {
  var x = 10;
  console.log(x); // 10
}
console.log(x); // エラー: x is not defined

上記のコードでは、xはtestVar関数内で宣言されているため、関数外からはアクセスできません。このように、varは関数スコープに閉じた変数を作成します。

グローバルスコープ

javascript
var y = 20;
function testVar2() {
  console.log(y); // 20
}
testVar2();
console.log(y); // 20

このコードでは、yは関数外で宣言されており、グローバルスコープに属しています。そのため、どこからでもアクセスすることができます。

3. varのホイスティング

varにおける特に注目すべき挙動の一つがホイスティングです。ホイスティングとは、変数や関数が宣言された位置に関わらず、実行前に宣言部分がコードの先頭に「持ち上げられる」現象を指します。

変数のホイスティング

javascript
console.log(a); // undefined
var a = 5;
console.log(a); // 5

上記の例では、最初のconsole.logでaを出力しようとするとundefinedが表示されます。これは、aの宣言が関数やスコープの先頭にホイスティングされるためです。ただし、代入は実行されないため、最初はundefinedになります。

4. varとletおよびconstとの違い

letとconstは、varの後に登場した新しい変数宣言方法です。これらは、varと比べてより予測可能で、バグの原因を減らすことができます。

変数のスコープの違い

letとconstはブロックスコープを持ちます。つまり、コードブロック内（例えば、if文やfor文内）で宣言した変数は、そのブロック内でしか使用できません。

javascript
if (true) {
  let x = 10;
  const y = 20;
  var z = 30;
}

console.log(x); // エラー: x is not defined
console.log(y); // エラー: y is not defined
console.log(z); // 30

上記のコードでは、xとyはブロックスコープに限定され、zだけが関数スコープまたはグローバルスコープに存在します。

letとconstの再代入の制約

letとconstは、変数の再代入に関して異なるルールを持っています。letは再代入が可能ですが、constは一度値を代入したらその値を変更できません。

javascript
let a = 5;
a = 10; // 問題なし

const b = 5;
b = 10; // エラー: Assignment to constant variable.

constは、定数のように振る舞うため、再代入が許されません。一方で、オブジェクトや配列の場合、その内容（プロパティや要素）は変更可能です。

5. varの問題点

varにはいくつかの問題点があります。主なものは以下の通りです。

1. スコープが予測しづらい

varは関数スコープにしか対応していないため、ブロック内での宣言が外部に影響を与えることがあります。このため、大規模なコードでは予期しない挙動が発生しやすくなります。

2. ホイスティングの誤解を招く

varのホイスティングは予測しづらく、特に初心者には混乱を招く原因となります。letやconstはホイスティングの挙動がより直感的であり、変数が使われる前に宣言されていることを強制します。

3. 再宣言が可能

同じスコープ内でvarを使って同じ名前の変数を再宣言することができます。これは意図しないバグの原因になることがあります。

javascript
var a = 10;
var a = 20; // 再宣言が許可される
console.log(a); // 20

6. まとめ

varは、JavaScriptにおける古くから使われている変数宣言の方法ですが、その予測しづらいスコープやホイスティングの問題から、現在ではletやconstの使用が推奨されています。letとconstは、より明確で意図的なコードを書けるため、特に複雑なアプリケーションでは重要な選択肢です。新しいコードを書く場合、できる限りvarの使用を避け、letとconstを使うようにしましょう。

それでも、古いコードやレガシーシステムでvarを使用している場合、その挙動について十分に理解しておくことが、バグを避けるために重要です。

最終更新： 26/03/2025
1 分の読み
Back to top button