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

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

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

JavaScriptの変数宣言の特徴

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

JavaScriptの変数宣言
1var a;
2let b;
3const c;

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

varletconst
再代入○○×
再宣言○××
スコープ関数スコープブロックスコープブロックスコープ

再代入

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

再代入
 1//再代入可能
 2var a = 1;
 3a = 2;
 4
 5//再代入可能
 6let b = 1;
 7b = 2;
 8
 9//エラーが起きる
10//Uncaught TypeError:
11const c = 1;
12c = 2;

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

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

再宣言

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

再宣言
 1//再宣言可能
 2var a = "宣言1回目";
 3var a = "宣言2回目";
 4
 5//エラーが起きる
 6//Uncaught SyntaxError:
 7let b = "宣言1回目";
 8let b = "宣言2回目";
 9
10//エラーが起きる
11//Uncaught SyntaxError:
12const c = "宣言1回目";
13const c = "宣言2回目";

スコープ

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

スコープ
 1function x() {
 2
 3  var a = 1;
 4  console.log(a); 
 5  {
 6
 7    a = 2;
 8    console.log(a);
 9  }
10  console.log(a);
11}
12
13//出力結果
14//1
15//2
16//2

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

スコープ
 1function x() {
 2
 3  let b = 1;
 4  console.log(b); 
 5  {
 6
 7    b = 2;
 8    console.log(b);
 9  }
10  console.log(b);
11}
12
13//出力結果
14//1
15//2
16//1

変数の巻き上げについて

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

変数の巻き上げ
1var x = "Test1";
2
3function func() {
4  console.log(x);  // undefinedが出力される
5  var x = "Test2";
6  console.log(x); // Test2
7}

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

変数の巻き上げ
1var x = "Test1";
2
3function func() {
4  var x; //変数の巻き上げ
5  console.log(x); // undefinedが出力される
6  x = "Test2";
7  console.log(x); // Test2
8}

varの利用が非推奨な理由

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

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

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

今回はJavaScriptの変数型についてまとめました。以上で記事を終わりにします。

参考文献