JavaScriptの変数宣言の違い｜var・let・constの使い分けとスコープ解説

JavaScriptの変数宣言の違い｜var・let・constの使い分けとスコープ解説

JavaScriptで変数を宣言するとき、var・let・constのどれを使えばいいか迷ったことはありませんか？
この記事では、それぞれの違いと使い分けのポイントを詳しく解説します。

javascriptの変数宣言には「var」と「let」の2種類がありますが違いがあります。
「var」と「let」は変数宣言なのでどちらも値を変更できます。
「const」は定数宣言なので値を変更できません。

値の変更

変数宣言である「var」と「let」は値の変更ができます。
しかし、定数宣言である「const」は値の変更ができません。

<script>
  var   v = "初期値";
  let   l = "初期値";
  const c = "初期値";

  v = "別の値";
  l = "別の値";
  c = "別の値";//値を変更しようとしたのでエラー
</script>

再宣言

変数宣言「var」は再宣言が可能です。
しかし、変数宣言「let」と定数宣言「const」は再宣言ができません。

<script>
  var   v = "初期値";
  let   l = "初期値";
  const c = "初期値";

  //var let constで再宣言
  var   v = "別の値";
  let   l = "別の値";//letで同じ変数を再宣言したのでエラー
  const c = "別の値";//constで同じ定数を再宣言したのでエラー
</script>

スコープ

スコープとは変数宣言、定数宣言を行った場所のことで、 通常は「{」から「}」の内側のことを表します。

<script>
  //変数zのスコープはグローバル
  let z="グローバル";

  //変数 a と b のスコープはtest関数内のローカル変数
  function test(){  //変数 a と b のスコープはここから
    let a=0;
    let b="";
  }  //変数 a と b のスコープはここまで
</script>

varはスコープ外でも利用できますが、 letとconstはスコープ外からは利用できません。
スコープが無い変数をグローバル変数と呼ぶことがあります。
スコープがある変数をローカル変数と呼ぶこともあります。

<script>
  //変数zのスコープはグローバル
  let z="グローバル";

  if( z=="グローバル"){  //変数 v,l と 定数 c のスコープはここから
    var   v = "初期値";
    let   l = "初期値";
    const c = "初期値";
  }  //変数 v,l と 定数 c のスコープはここまで


  alert(z);//グローバル変数なので利用可能
  alert(v);//スコープ外でも利用可能
  alert(l);//スコープ外なのでエラー
  alert(c);//スコープ外なのでエラー
</script>

変数は様々な場所で使うのでスコープが重要になります。
なので変数宣言は「let」を使うことをお勧めします。

ちなみに、宣言しなくても変数を使うことが出来が、この場合はグローバルスコープになり、
この変数がオブジェクトの場合は明示的に破棄する出来ます(delete 変数;)が、混乱の元なのでお勧めしません。