【JavaScript】var,let,const の違い

JavaScriptでは、変数や定数を宣言する際に、var/let/constを使用します。
と言っても使用は必須ではなく、var/let/constを使用せずに変数や定数を宣言できます。

こんな感じです。

var a = 'Var';
let b = 'Let';
const c = 'Const';
d = 'Undeclared';

それぞれどのような違いがあるのでしょうか？
実際の動作をクイズ形式で確認してみます。

目的

var/let/const の違いを理解する

Q1

エラーとならないのは(a)～(d)のどの変数でしょうか？

console.log(a1);  // (a)
console.log(b1);  // (b)
console.log(c1);  // (c)
console.log(d1);  // (d)

var a1 = 'Var';
let b1 = 'Let';
const c1 = 'Const';
d1 = 'Undeclared';

正解は…
：
：
：
：
：
(a)！

Q1解説

var は巻き上げが発生します。

console.log(a1);
var a1 = 'Var';

は、

var a1;
console.log(a1);
a1 = 'Var';

と見なされるので、エラーとはならず(a)は undefined が出力されます。
(b)(c)(d)はいずれも ReferenceError となります。

Q2

エラーとならないのは(a)～(d)のどの変数でしょうか？

{
    var a2 = 'Var';
    let b2 = 'Let';
    const c2 = 'Const';
    d2 = 'Undeclared';
}

console.log(a2);  // (a)
console.log(b2);  // (b)
console.log(c2);  // (c)
console.log(d2);  // (d)

正解は…
：
：
：
：
：
(a)(d)！

Q2解説

JavaScriptにブロックスコープの概念が追加されたのはECMAScript2015からです。

let と const で宣言した変数はブロックスコープが適用されます。
なので、{}の中だけで利用したい変数は let または const で宣言しましょう。

var で定義した変数はグローバル変数の扱いとなり{}の外からでも参照できます。
var/let/constのいずれも使用せずに宣言した変数もグローバル変数扱いになります。

Q3

エラーとならないのは(a)～(d)のどの変数でしょうか？

function method() {
    var a3 = 'Var';
    let b3 = 'Let';
    const c3 = 'Const';
    d3 = 'Undeclared';
}

console.log(a3);  // (a)
console.log(b3);  // (b)
console.log(c3);  // (c)
console.log(d3);  // (d)

正解は…
：
：
：
：
：
なし！（すべてエラーとなる！）

Q3解説

関数（ function ）の中で宣言された変数は関数の外から参照できません。

{}のブロックスコープと概念が異なることに注意しましょう。

Q4

エラーとならないのは(a)～(d)のどの変数でしょうか？

var a4 = 'Var';
let b4 = 'Let';
const c4 = 'Const';
d4 = 'Undeclared';

a4 = 'New Var';  // (a)
b4 = 'New Let';  // (b)
c4 = 'New Const';  // (c)
d4 = 'New Undeclared';  // (d)

正解は…
：
：
：
：
：
(a)(b)(d)！

Q4解説

const は定数を意味します。Javaでいうところの final と同じです。
そのため、新しい値を設定できず、(c)のみ TypeError となります。

Q5

エラーとならないのは(a)～(d)のどの変数でしょうか？

var a5 = 'Var';
let b5 = 'Let';
const c5 = 'Const';
d5 = 'Undeclared';

var a5 = 'New Var';  // (a)
let b5 = 'New Let';  // (b)
const c5 = 'New Const';  // (c)
d5 = 'New Undeclared';  // (d)

正解は…
：
：
：
：
：
(a)(d)！

Q5解説

let と const で宣言した変数は再宣言が不可となります。

let と const をうまく利用すれば、間違って参照したり宣言したりしてしまうことを防げます。

まとめ

var
- 変数の巻き上げが発生する
- グローバル変数である
- 再代入・再宣言できる

let
- 変数の巻き上げが発生しない
- ローカル変数である
- 再代入できる
- 再宣言できない

const
- 変数の巻き上げが発生しない
- ローカル変数である
- 再代入できない
- 再宣言できない

いずれも使用しない
- 変数の巻き上げが発生すしない
- グローバル変数である
- 再代入・再宣言できる