JavaScriptの変数宣言”var”と”let”の使い方間違えていませんか？

“var”と“let”って何が違うの？

　JavaScriptの変数の宣言には”var”と”let”がありますが、それぞれの違いを正しく理解して実装できていますか？誤った実装を良く見かけますので本記事で復習しましょう。
“var”と”let”の主な違いは、宣言した変数の有効な範囲（スコープ）です。
“var”で宣言された変数は宣言以降、どこでも使うことができます。
対して“let”で宣言された変数は、”let”を定義したプログラムを囲むブロック内（{～}で示される）でのみ有効となります。例えばif文の中で”let”で定義された変数はif文内では有効ですが、if文の外に出たら変数は無効になります。（”var”で定義していた場合、if文の外に出てもその変数は使用できますよね。）
これは、"let"がブロックスコープであり、"var"が関数スコープであることを意味します。

以下のサンプルコードを使ってもう少し詳しく説明します。

function run() {
  var AAA = "AAA";　// AAAを宣言
  let BBB = "BBB";　// BBBを宣言
  console.log(AAA, BBB); // AAA BBBが出力される。

  {
    var CCC = "CCC"; // CCCを宣言
    let DDD = "DDD"; // DDDを宣言
    console.log(CCC, DDD); // CCC DDDが出力される。
  }

  console.log(CCC); // CCCが表示される。
  console.log(DDD); // エラー発生（ReferenceError）
}

// 1行目のrun関数を実行
run();

上記の例では、CCCは”var“で宣言されているため、ブロック外でもアクセスできますが、DDDは”let“で宣言されているため、ブロック外ではアクセスできず、エラーとなります。（ReferenceErrorが発生）
また、”var“で宣言された変数は、宣言される前でも”undefined“としてアクセスすることが可能ですが（これを”巻き上げ[hoisting]”と言います。）、”let“で宣言された変数は宣言されるまでアクセスできず、使用することができません。
また”var”は同じスコープ内で同じ変数を再宣言することが可能ですが、”let“で再宣言するとエラーとなります。（SyntaxErrorが発生）
※再宣言することはできませんが、再代入することは可能です。”var”は再宣言・再代入ともに可能。

“var”をもう少し詳しく

　”var“は関数スコープを持つため、変数は関数の中で定義された場所に関係なく、関数全体で利用可能です。また、”var“で宣言された変数は、宣言前に参照することが可能な”巻き上げ（hoisting）”が発生します。

function Test_Var() {
  console.log(E); // ”undefined”が出力される。（巻き上げによりエラーにはなりません。）
  var E = 0;
  console.log(E); // 0が出力される。
}
Test_Var();

“let”をもう少し詳しく

　”let“はブロックスコープを持つため、変数はその宣言が行われたブロック（{～}で囲まれた範囲）内でのみ利用可能です。また、”let“で宣言された変数は巻き上げが発生しないため、宣言前に参照するとエラーになります。

function Test_Let() {
  console.log(F); // "ReferenceError: y is not defined"が出力される。（巻き上げは発生しませんのでエラーになります。）
  let F = 1;
  console.log(F); // 1が出力される。
}
Test_Let();

まとめ

　”var“と”let“の違いは理解できましたか？”var“と”let“の違いをしっかり理解することで、適切な場所で適切な変数を定義、使用することができます。ただし、現代のJavaScriptの開発では、”var"よりも”let“の使用が推奨されています。これは、”let“がブロックスコープを持つため、ソースコードの可読性が向上するためです。そのため、比較的新しいコードでは"let"の使用が一般的です。ただし、既存のコードや特定の状況では、”var“の使用が適切な場合もありますので、プログラムの特性を理解し、適切に使用するよう心がけましょう。