【ES6】JavaScript：let / var / constの違いは？使い方を解説！

JavaScriptを学び始めたときに混乱するのが「変数宣言」ですよね。

「let / var / constの3種類の変数宣言キーワードがあるけど、どれを使えばいいの？」と悩んでいる方が多いのではないでしょうか。

このページでは、各変数宣言キーワードの違いや、使い方などを初心者の方にも分かりやすく解説しています。

違いが分からないけど、なんとなく使っているという方も、ぜひ参考にしてみてくださいね。

1. 変数宣言とは？

まずはじめに変数宣言について解説します。

これを理解していないと、次に進んでも混乱してしまいますのでしっかり把握しておきましょう。

どんな変数を作るかを伝えるもの

ここでは変数宣言について解説します。

変数宣言とは、「◯◯という名前の変数（箱）を作ります」とプログラムに伝えるためのものです。

たとえば、学校の授業中にいきなり手を上げた場合、なぜ手を上げたのか伝えないと先生は困ってしまいますよね。

このように手を上げた理由を伝えることで、先生は適切に対応することができます。

JavaScriptも同じで、プログラムが適切に対応できるように、あらかじめ変数（箱）を作ることを伝えておく必要があります。

そのために行うのが変数宣言です。

変数宣言キーワードとは？

ここでは変数宣言キーワードについて解説します。

変数宣言キーワードとは、プログラムに「こういう種類の変数（箱）を作ります」と伝えるためのものです。

JavaScriptには次のように3種類の変数宣言キーワードがあります。

変数宣言の使い方とは？

ここでは変数宣言のやり方を解説します。

変数宣言

変数宣言のやり方は、まず変数宣言キーワードを書き、そのあとに変数名（箱の名前）を書きます。

let a;

代入

代入のやり方は、まずはじめに変数宣言を書き、その下に「変数 = 変数に入れたい値」を書きます。

let a; //変数宣言
a = 1; //代入

定義（初期化）

let a = 1; //変数宣言 + 代入

これは変数宣言と代入をまとめて書いた例です。

このように変数宣言と代入を同時に行うことを「定義（初期化）」といいます。

一般的にコードを書くときは、行数を減らして読みやすくするために、変数宣言と代入をまとめて書くことが多いです。

const a; // ❌（変数宣言のみ書くとエラー）

const a;
a = 1; // ❌（変数宣言と代入を分けて書くとエラー）

const a = 1; // ✅（変数宣言と代入をまとめて書くとOK）

2. let / var / const の違い

ここでは、3種類ある変数宣言「var / let / const」の違いについて詳しく解説しています。

バージョン

「var / let / const」はバージョンが異なります。

バージョンとは？

各変数宣言のバージョン詳細

再宣言

「var / let/ const」の再宣言についてです。

再宣言とは？

var a = 1; // 1回目の宣言
var a = 2; // 2回目の宣言（再宣言）

再宣言した場合の例

var a = 1; // 1回目の宣言
var a = 2; // 2回目の宣言（再宣言）

console.log(a); //コンソールに実行結果を表示

2

let a = 1; // 1回目の宣言
let a = 2; // 2回目の宣言（再宣言）

console.log(a);	//コンソールに実行結果を表示

Uncaught SyntaxError SyntaxError: Identifier 'a' has already been declared

const a = 1; // 1回目の宣言
const a = 2; // 2回目の宣言（再宣言）

console.log(a); //コンソールに実行結果を表示

Uncaught SyntaxError SyntaxError: Identifier 'a' has already been declared

再代入

「var / let / const」の再代入についてです。

再代入とは？

var a = 1;	// 1回目の代入
a = 2;		// 2回目の代入（再代入）

再代入した場合の例

var a = 1;	// 1回目の代入
a = 2;		// 2回目の代入（再代入）

console.log(a);	//コンソールに実行結果を表示

2

let a = 1;	// 1回目の代入
a = 2;		// 2回目の代入（再代入）

console.log(a);	//コンソールに実行結果を表示

2

const a = 1;		// 1回目の代入
a = 2;			// 2回目の代入（再代入）

console.log(a);	//コンソールに実行結果を表示

Uncaught TypeError TypeError: Assignment to constant variable.

スコープ ※中級者向け

「var / let / const」のスコープ（有効範囲）についてです。

スコープとは？

各スコープの詳細

let a = 1; // グローバルスコープで変数「a」宣言

// 関数「test」を宣言
function test() { 
  console.log(a); // 関数内から変数「a」にアクセス
}

test(); // 関数「test」を呼び出す

1

// 関数「test」を宣言
function test() {
  let a = 1; // 関数内で変数「a」宣言
}

console.log(a); // 関数外から関数内で宣言された変数「a」にアクセス

Uncaught ReferenceError ReferenceError: a is not defined

if (true) {
  let a = 1; // ブロックスコープで変数「c」宣言
}

console.log(a); // エラー：cは定義されていない

Uncaught ReferenceError ReferenceError: a is not defined

巻き上げ ※中級者向け

「var / let / const」の巻き上げ（ホスティング）についてです。

巻き上げとは？

var a = 1; //変数宣言
console.log(a); //出力命令

1

console.log(a); //出力命令
var a = 1; //変数宣言

undefined

var a; // 宣言
console.log(a); // 出力命令
a = 1; // 代入

各宣言で巻き上げの例

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

undefined

console.log(a);
let a = 1;

Uncaught ReferenceError ReferenceError: Cannot access 'a' before initialization

3. let / var / const 使い分け

ここでは変数宣言キーワード「var / let / const」の使い分け方について解説しています。

初心者の方だけでなく、よく分からずに使っているという方も

const（最優先で使う）

　
基本的に変数宣言のキーワードはconstを使いましょう。

なぜならconstは変数（箱）の中身が変わらないので、意図していないデータの上書きを防ぐことができるからです。

プログラミングでは時間が経ってから自分の書いたコードを見返したとき「これって何のための変数だったっけ？」と迷うことがあります。

そんなときconstで宣言されていれば「ここは変数（箱）の中身は変わらないんだな」とコードの意図を把握しやすくなります。

このように、保守性や読みやすさの面からもconstを使うことをおすすめします。

let（必要なときだけ使う）

　
変数宣言キーワードletは「変数（箱）の中身を変更される、またはあとで変更したい」という場合のみ使いましょう。

具体的にはループ処理（繰り返し処理）などで、変数の中身が変更されるときに使います。

たとえば、次のように変数iの中身を1→2→3→4と変化させながら繰り返し処理（ループ）していくケースです。

for (let i = 1; i < 5; i++) {
  console.log(i);
}

こういった場合constを使うとiの中身が変更できないため、エラーになってしまいます。

したがって、変数（箱）の中身が変更されるケースのみletを使いましょう。

var（基本的に使わない）

　
基本的にvarは使わないです。

なぜならvarは何度でも再宣言できるため、意図しない変数の上書きによるバグが起こりやすいからです。

また、関数の中でしかスコープが区切られないため、ブロック{}内で宣言しても、外からアクセスできてしまうという欠点があります。

このようにデメリットが非常に多いのでvarを使うことはおすすめできません。

4. よくある質問

ここでは変数宣言「let / var / const」についてのよくある質問をご紹介しています。

変数宣言が必要な理由は？

しかし、変数宣言が必要な理由は、宣言することでエラーを防いだり、プログラムがデータを正しく使えるようにするためです。

たとえば、いきなり「りんごを冷蔵庫に入れておいて」と言われても、その場所に冷蔵庫がなかったら困ってしまいますよね。

プログラムも同じで、先に「冷蔵庫（変数）」の存在を知らせておかないと「りんご（データ）」をどこに入れればいいのか分かりません。

つまり、「この名前の変数（箱）にデータを入れるよ」とプログラムに伝えるために変数宣言は必要です。

letが使えない

letが使えない場合は次のいずれかの原因が考えられます。

lot x = 10;  // ← 「let」が「lot」になっている
console.log(x)

Uncaught SyntaxError SyntaxError: Unexpected identifier 'x'

{
  let x = 1;
  let x = 2; // エラー：xはすでにこのブロック内で宣言されている
}

{
let x = 1;
x = 2; // これはOK（再代入）
}

letは使わない？非推奨？

結論から言うとletは非推奨ではありません。

これは再代入があるときに使う変数宣言ですので、使ってもまったく問題ありません。

ただし、プログラマーの中には「再代入しない変数はすべてconstで宣言すべき」という意見があります。

実際にエンジニアの現場でも、意図しない再代入を防ぐためにconstを使われていることが多いです。

個人的にもletでなければいけないケース以外はconstを使うことをおすすめします。

【JSの豆知識】
JSの変数宣言はvar、let、constとあるが、ほとんどconstしか使わない。
現場のソースコードも9割const。
理由は意図しない値の再代入を防ぐため。
気軽にvarやletを書くのは避けよう。#プログラミング初心者#駆け出しエンジニアと繋がりたい

— よすけ (@yosuke_midman) March 11, 2022

varは使わない？

結論から言うとvarを使うことはおすすめしません。

なぜならvarには次のようなデメリットがあるからです。

このようにバグの原因になる可能性がありますので、現在では安全性の高いletとconstを使うことが推奨されています。

5. まとめ

結論としましては、変数宣言キーワードはconstを使いましょう。

constは変数の中身が変わらないのでバグを防ぎやすく、コードの意図が明確にできるメリットがあります。

一方で、変数の中身をあとで変える、またはループ処理などで変数の中身が変わる場合はletを使いましょう。

なお、varは再宣言ができたり、スコープの扱いが特殊だったり、バグの原因になりやすいので使わないようにしましょう。