【JavaScript】変数の定義とvar、let、constの違い

varを使用すれば、新たに変数を宣言することができます。

しかし、全ての変数をvarで宣言してしまうと、後々に重大なバグを生み出してしまう可能性があります。

本記事では、変数の宣言で使われるvarに加え、同じくES6にて新たに追加されたlet及びconstについて解説します。

var

varは通常、このようにして変数を宣言可能です。

var greet = "Hello";
console.log(greet); // Hello

しかし、同名の変数が再宣言されることによって、想定した結果が得られないことがあります。

var greet = "Hello";

/* 省略 */

var greet = "こんにちは";

/* 省略 */

console.log(greet); // こんにちは

また、varはスコープ(変数の有効範囲)が関数全域に及びます。

var i = 30;
for(var i=0;i<10;i++){
    console.log(i); // 0,1,2,3,4,5,6,7,8,9
}
console.log(i) // 10

末端のconsole.log()で30の出力を期待していたにもかかわらず10が出力されました。途中のforで再宣言されたiで値を変更させられ10になってしまったのです。

さらにvarは変数の巻き上げが起こります。

console.log(greet); // undefined
var greet = "Hello";

上記のコードは一見エラーになると思われますが、undefinedが出力され、エラーにはなりません。なぜなら、関数内でvarで宣言された変数は先頭にまとめて行われるからです。上記コードは下記と等価になります。

var greet;
console.log(greet); // undefined
greet = "Hello";

このようにvarには潜在的なバグを生み出す要素があります。

letはvarと違って再宣言ができない仕組みで、ブロックスコープになっており、巻き上げ問題もありません。ブロックとは{}で囲まれた部分の事を意味します。

let i = 30;
for(let i=0;i<10;i++){
    console.log(i); // 0,1,2,3,4,5,6,7,8,9
}
console.log(i) // 30

ブロックスコープであるletではforで定義されたiとforの前に定義されたiはそれぞれ別物として扱われます。

constは編集不可能な定数を定義することができます。letと同様に再宣言は不可能でブロックスコープであり、再代入もできません。ただし、配列やオブジェクトに追加、編集をすることはできます。

const num_list = [1,2,3,4,5];
num_list.push(6);
num_list[0] = 0;

console.log(num_list); // 0,2,3,4,5,6

num_list = [7,8,9]; // Uncaught TypeError

それぞれの違いをまとめるとこうなります。