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

JavaScriptでは、プログラムの中で値を扱うために「変数」を使用します。
変数とは、数値や文字列などのデータを入れておく“箱”のようなものです。

JavaScriptで変数を定義する方法はいくつかあり、代表的なものにvar、let、constの3種類があります。特に初心者の方は、「どれを使えばいいの？」「違いがよく分からない…」と迷ってしまうことも多いでしょう。

以前はvarが一般的に使われていましたが、現在ではES6（ECMAScript 2015）で追加されたletとconstを使うのが主流になっています。それぞれにはスコープ（有効範囲）や再代入の可否など、重要な違いがあります。

これらの違いを理解せずに使ってしまうと、思わぬバグの原因になることもあります。逆に、特徴を正しく理解して使い分けることができれば、より安全で読みやすいコードを書くことができます。

本記事では、var・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

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