【JavaScript】変数varは使わない方が良い理由【const・let】

今回はJavaScriptの変数型var・let・constについて、varの使用が非推奨とされる理由について、各変数宣言の特徴や巻き上げなどの観点からまとめていきます。

JavaScriptの変数宣言の特徴

JavaScriptの変数宣言にはvar・let・constの3種類があります。

var a;
let b;
const c;

それぞれの特徴について見てみましょう。

変数var・let・constの特徴

再代入とは宣言した変数に、再度値を代入することです。var・letは再代入が可能ですが、constは不可能です。

var a = 1;
a = 2;
//再代入可能

let b = 1;
b = 2;
//再代入可能

const c = 1;
c = 2;
//エラーが起きる
//Uncaught TypeError:

ここで、constは単なる再代入はできませんが、オブジェクト型の中身を変更することができます。

const obj = {
  id: 01;
  name: "オブジェクト1";
}
obj.name = "オブジェクト2";
//オブジェクトの中身は変えられる

再宣言とは、宣言した変数名を再度宣言し直すことです。varは再宣言が可能ですが、let・constは不可能です。

var a = "宣言1回目";
var a = "宣言2回目";
//再宣言可能

let b = "宣言1回目";
let b = "宣言2回目";
//エラーが起きる
//Uncaught SyntaxError:

const c = "宣言1回目";
const c = "宣言2回目";
//エラーが起きる
//Uncaught SyntaxError:

スコープとは関数を呼び出すことが出来る範囲のことです。varのスコープは関数スコープであり、ある関数内で宣言した変数は、その関数のどこからでも呼び出すことができます。

function x() {

  var a = 1;
  console.log(a); 
  {

    a = 2;
    console.log(a);
  }
  console.log(a);
}
//出力結果
//1
//2
//2

対して、let・constのスコープはブロックスコープです。関数スコープと違い、関数内の記述位置でスコープから外れます。

function x() {

  let b = 1;
  console.log(b); 
  {

    b = 2;
    console.log(b);
  }
  console.log(b);
}
//出力結果
//1
//2
//1

JavaScriptには変数の巻き上げという独特の特徴を有しています。関数内で宣言された変数は、関数の先頭で宣言したとみなされます。

var x = "Test1";

function func() {
  console.log(x);  // undefinedが出力される
  var x = "Test2";
  console.log(x); // Test2
}

上のコードではxの宣言前にconsole.logで記述していて、一見Test1が出力される気がしますが、undefined（未定義）が出力されます。これが変数の巻き上げで、上のコードは実行時には下のコードのように見なされます。

var x = "Test1";

function func() {
  var x; //変数の巻き上げ
  console.log(x); // undefinedが出力される
  x = "Test2";
  console.log(x); // Test2
}

上で述べた様に、varは再宣言・再代入が可能であること、スコープの範囲が広いこと、巻き上げの特徴を持つことから、変数の値が意図しない影響を受けてしまう可能性があります。

上記のような仕様から、特に複雑なソースコードではvarを使用を避けるべきであると言えます。

基本的には変数宣言にはconstを使い、constだけでは難しい場合にletを使うようにしましょう。例えばfor文などは使うのはletですね。以上で記事を終わりにします。