【JavaScript入門】var：古い変数宣言

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

var：古い変数宣言

　JavaScript には、近年では let や const を使って変数を宣言するのが一般的ですが、以前からある var という宣言方法も存在します。var は古い仕様のため、現在は非推奨とされていることが多いですが、古いコードやライブラリでは今でも使われています。ここでは var の特徴や注意点を解説します。

１．古い変数宣言 `var` の特徴

種類	スコープ	再宣言	巻き上げ時の仕様
`let`	ブロックスコープ＋関数スコープ	できない。	エラーになる。
`var`	関数スコープのみ	できる（同名OK）	変数の中身が `undefined` になる。

スコープ： var はブロック（{ }）を無視して、関数の中かどうかだけで有効範囲が決まります。
再宣言：同じスコープ内でも同名の変数を何度でも宣言できます。これは意図しない上書きを誘発しやすく、バグの原因になります。
巻き上げ (Hoisting)： var で宣言された変数は、スコープの先頭に変数名だけが登録されているかのように扱われますが、中身は undefined のままです。後から宣言と同時に初期化が行われるイメージです。

２．`var` のスコープと再宣言の例

　以下のサンプルを「oldVarExample.html」というファイル名で保存し、ブラウザの開発者ツールで結果を確認してみましょう。ここでは、変数宣言に var を使い、関数スコープや再宣言の挙動を示しています。

【oldVarExample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>oldVarExample.html</title>
</head>
<body>
  <h1>var：古い変数宣言のサンプル</h1>
  <p>コンソールを開いて結果を確認してください。</p>
  <script>
    // var で宣言した関数（スコープ確認用）
    function scopeCheck() {
      console.log('--- scopeCheck 関数が呼ばれました ---');

      console.log('food の値(宣言前):', food); 
      // ここでは巻き上げにより food は存在するが、未初期化のため undefined

      var food = 'カレー';
      console.log('food の値(宣言後):', food);

      if (true) {
        // ブロック内だが、var は関数スコープのため同じスコープ
        var food = 'オムライス';
        console.log('food の値(if ブロック内):', food);
      }

      console.log('food の値(if ブロック後):', food);

      // 同スコープ内で再度 var food を宣言してもエラーにならない（同名再宣言）
      var food = 'ラーメン';
      console.log('food の値(再宣言後):', food);
    }

    scopeCheck();
  </script>
</body>
</html>

実行結果

デバッグコンソールの出力

　このサンプルをブラウザで実行すると、コンソールには以下のように表示されます（内容は上書きの状況をわかりやすくするための例です）。

--- scopeCheck 関数が呼ばれました ---
food の値(宣言前): undefined
food の値(宣言後): カレー
food の値(if ブロック内): オムライス
food の値(if ブロック後): オムライス
food の値(再宣言後): ラーメン

巻き上げで food が宣言前にも存在扱いされるが、中身は undefined。
ブロック内 (ifの中) で var food を書いても、同じ関数スコープとして扱われるため、外側も書き換わる。
再宣言 (var food) してもエラーにならず、値が再度代入されてしまう。

４．なぜ `var` は推奨されないか

ブロックスコープを無視するため、意図した箇所で変数が限定されない。
同じ名前で何度でも再宣言可能なので、価値のあるデータが予期せず上書きされやすい。
巻き上げ (Hoisting) による undefined やバグの発生リスクが大きい。

　その結果、「変数がどの範囲まで通用するのか」「いつ代入されるのか」がわかりにくくなり、バグの温床になりがちです。現在の JavaScript では、let や const を標準とし、よほどの理由がない限り var を使わないことが推奨されています。

まとめ

　var は過去の互換性維持のために残されている宣言方法で、関数スコープや自由な再宣言といった特徴を持ちます。しかし、思わぬバグを引き起こす可能性が高いため、現代の JavaScript では基本的に使う必要はありません。let と const を適切に使い分けて、コードの可読性と安全性を高めましょう。

【JavaScript入門】var：古い変数宣言