変数宣言 var と let の違い - JavaScript

JavaScriptの変数宣言の var と let の違いを紹介します。

概要

こちらの記事ではJavaScriptの変数宣言について紹介しましたが、変数宣言にはvar と let の2つがあります。どのような動作の違いがあるのかを紹介します。

動作の違い

var

従来の宣言方法です。varで宣言した変数はブロック外からも参照できます。

let

EcmaScript6から導入された宣言方法です。letで宣言した変数はブロック外から参照できません。

プログラム例:変数宣言を通らない場合

コード

下記コードを記述します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script>
    function onButton1Click() {
      FuncVar();
      FuncLetFix();
    }

    function FuncVar() {
      if (false) {
        var value1 = "あざらしゼリー";
      }

      var elem = document.getElementById("outVarFrame");
      elem.innerHTML = value1;
    }

    function FuncLet() {
      if (flase) {
        let value1 = "あざらしゼリー";
      }

      var elem = document.getElementById("outLetFrame");
      elem.innerHTML = value1;
    }
  </script>
</head>
<body>
  <h1>var, let のデモ</h1>

  <input type="button" value="Exec1" onclick="onButton1Click();" />
  <hr />
  Var:<div id="outVarFrame"></div>
  <hr />
  Let:<div id="outLetFrame"></div>
</body>
</html>

解説

value1変数を宣言し、値を代入していますが、ifブロックはfalseのため、内部の処理が実行されることはありません。

  if (false) {
    var value1 = "あざらしゼリー";
  }

  var elem = document.getElementById("outVarFrame");
  elem.innerHTML = value1;

同様のコードでlet変数定義の関数も用意します。

  if (flase) {
    let value1 = "あざらしゼリー";
  }

  var elem = document.getElementById("outLetFrame");
  elem.innerHTML = value1;

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。

[Exec1]ボタンをクリックします。下図の画面が表示されます。
[Var]の枠は undefined が表示されますが、[Let]の枠には何も表示されません。

デバッガで確認すると、FuncLet関数で、value1 変数にアクセスしたタイミングで、例外が発生していることが確認できます。

例外の内容は以下です。ブロック内で宣言されたlet変数を、ブロック外から参照したため例外が発生しました。

Uncaught ReferenceError: (変数名) is not defined

プログラム例:変数宣言を通る場合

コード

下記コードを記述します。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script>
    function onButton1Click() {
      FuncVar(0);
      FuncLet(0);
    }

    function onButton2Click() {
      FuncVar(1);
      FuncLet(1);
    }

    function FuncVar(param) {
      var value1 = "Penguin";
      if (param == 0) {
        var value2 = "Cookie";
      }

      var elem = document.getElementById("outVarFrame");
      elem.innerHTML = value1 + " : " + value2;
    }

    function FuncLet(param) {
      let value1 = "Penguin";
      if (param == 0) {
        let value2 = "Cookie";
      }

      var elem = document.getElementById("outLetFrame");
      elem.innerHTML = value1 + " : " + value2;
    }
  </script>
</head>
<body>
  <h1>var, let のデモ</h1>

  <input type="button" value="Exec1" onclick="onButton1Click();" />
  <input type="button" value="Exec2" onclick="onButton2Click();" />
  <hr />
  Var:<div id="outVarFrame"></div>
  <hr />
  Let:<div id="outLetFrame"></div>
</body>
</html>

解説

変数に値を代入します。2つの変数に値を代入します。一つはif文内での代入になります。
代入後に変数の値を画面に表示します。

    function FuncVar(param) {
      var value1 = "Penguin";
      if (param == 0) {
        var value2 = "Cookie";
      }

      var elem = document.getElementById("outVarFrame");
      elem.innerHTML = value1 + " : " + value2;
    }

上記のコードと同じ処理ですが変数をletで宣言しています。

    function FuncLet(param) {
      let value1 = "Penguin";
      if (param == 0) {
        let value2 = "Cookie";
      }

      var elem = document.getElementById("outLetFrame");
      elem.innerHTML = value1 + " : " + value2;
    }

[Exec1]ボタンをクリックした場合は、上記2つの関数を 0 のパラメーターで呼び出します。ifブロック内を通る動作になります。 [Exec2]ボタンをクリックした場合は、上記2つの関数を 1 のパラメーターで呼び出します。ifブロックを通らない動作になります。

    function onButton1Click() {
      FuncVar(0);
      FuncLet(0);
    }

    function onButton2Click() {
      FuncVar(1);
      FuncLet(1);
    }

実行結果

上記のコードをWebブラウザで表示します。下図のページが表示されます。

[Exec1]ボタンをクリックします。上部の[Var]のエリアには "Penguin : Cookie" の文字列が表示されますが、下の[Let]のエリアには何も表示されません。
Varの場合は、ブロック内で代入された値をブロック外で参照して値を取得できますが、 Letの場合はブロック内で宣言した変数をブロック外で参照すると例外になってしまいます。

[Exec2]ボタンをクリックします。上部の[Var]のエリアには "Penguin : undefined" の文字列が表示されますが、下の[Let]のエリアには何も表示されません。こちらの結果は先のプログラム例の結果と同様です。

デバッガで確認すると、FuncLet関数で、value2 変数にアクセスしたタイミングで、例外が発生していることが確認できます。

例外が発生しないようにするためには、ブロック外で変数を宣言する動作に変更します。以下のコードに変更します。

    function FuncLet(param) {
      let value1 = "Penguin";
      let value2 = "";
      if (param == 0) {
        value2 = "Cookie";
      }

      var elem = document.getElementById("outLetFrame");
      elem.innerHTML = value1 + " : " + value2;
    }

変更後のコードをWebブラウザで表示します。[Exec1]ボタンをクリックします。下図の画面が表示されます。[Let]の枠にもテキストが表示されます。