【JavaScript】var,let,constの違いと巻き上げを解説

本記事ではvar,let,constの違いをサンプルコードを交えて、解説します。
varは関数スコープで再宣言・再代入が可能で、letはブロックスコープで再宣言が不可ですが、再代入は可能です。constはブロックスコープで再宣言・再代入いずれもできません。

var,let,constの違い

それぞれの違いを表でまとめると以下の通りです。

var変数の説明

varで定義した変数は以下のような挙動となります。

• JavaScriptで宣言できるローカル変数
• 宣言された関数内で利用できる（ブロック外から参照可能）
• 再宣言・再代入ともに可能
• 巻き上げ（Hoisting）: var で宣言された変数は、スコープの先頭に巻き上げられる。（※巻き上げの詳細については後述。）

var再宣言(実行コード)

以下再宣言の確認コードです。

1
var hoge = 1;
2
var hoge = 2; // 再宣言できる
3
console.log(hoge);

var再宣言(実行結果)

再宣言した値が表示されることを確認できました。

1
2

var再代入(実行コード)

以下再代入の確認コードです。

1
var hoge = 1;
2
hoge = 3; // 再代入できる
3
console.log(hoge);

var再代入(実行結果)

再代入した値が表示されることを確認できました。

1
3

varスコープ(実行コード)

以下関数スコープの確認コードです。

1
if (true) {
2
  var num = 100;
3
  console.log("ブロック内：" + num);
4
}
5
// ブロック外から参照可能
6
console.log("ブロック外：" + num);

varスコープ確認(実行結果)

ブロック外から値が参照できることが確認できました。

1
ブロック内：100
2
ブロック外：100

let変数の説明

letで定義した変数は以下のような挙動となります。

• JavaScriptで宣言できるローカル変数
• 宣言されたブロック{ } 内でのみ利用できる
• 再宣言は不可であるが、再代入は可能
• 巻き上げ（Hoisting）: 変数はスコープの先頭に巻き上げられますが、実際に宣言されるまでは使用できない。 （一時的デッドゾーン：TDZ（Temporal Dead Zone））

let再宣言(実行コード)

以下再宣言の確認コードです。

1
let hoge = 1;
2
let hoge = 2; // 再宣言不可
3
console.log(hoge);

let再宣言(実行結果)

再宣言がエラーとなることを確認できました。

1
let hoge = 2; // 再宣言不可
2
    ^
3

4
SyntaxError: Identifier 'hoge' has already been declared

let再代入(実行コード)

以下再代入の確認コードです。

1
let hoge = 1;
2
hoge = 3; // 再代入できる
3
console.log(hoge);

let再代入(実行結果)

再代入できることを確認できました。

1
3

letスコープ(実行コード)

以下ブロックスコープの確認コードです。

1
if (true) {
2
  let num = '100';
3
  console.log(num);
4
}
5
// ブロック外からは参照不可
6
console.log(num);

letスコープ(実行結果)

ブロック外から値が参照できないことを確認できました。

1
console.log(num);
2
            ^
3

4
ReferenceError: num is not defined

const定数の説明

constで定義した変数は以下のような挙動となります。

• JavaScriptで宣言できる定数
• 宣言されたブロック{ } 内でのみ利用できる
• 再宣言・再代入ともに不可
• 巻き上げ（Hoisting）: 変数はスコープの先頭に巻き上げられるが、実際に宣言されるまでは使用できない。 （一時的デッドゾーン：TDZ（Temporal Dead Zone））

const再宣言（実行コード）

以下再宣言の確認コードです。

1
const hoge = 1;
2
const hoge = 2; // 再宣言は不可

const再宣言（実行結果）

再宣言がエラーとなることを確認できました。

1
const hoge = 2; // 再宣言は不可
2
      ^
3

4
SyntaxError: Identifier 'hoge' has already been declared

const再代入（実行コード）

以下再代入の確認コードです。

1
const hoge = 1;
2
hoge = 3; // 再代入は不可

const再代入（実行結果）

再代入がエラーとなることを確認できました。

1
hoge = 3; // 再代入は不可
2
     ^
3

4
TypeError: Assignment to constant variable.

constスコープ確認（実行コード）

以下ブロックスコープの確認コードです。

1
if (true) {
2
  const num = '100';
3
  console.log(num);
4
}
5
// ブロック外からは参照不可
6
console.log(num);

constスコープ確認（実行結果）

ブロック外から値が参照できないことを確認できました。

1
console.log(num);
2
            ^
3

4
ReferenceError: num is not defined

巻き上げ（Hoisting）について

巻き上げ（Hoisting） とは、JavaScriptの変数や関数の宣言が、スコープの先頭に持ち上げられる（ように見える）動作を指します。ただし、宣言のみが巻き上げられ、値の代入はその場で行われるため、未初期化の状態でアクセスすると undefined になることがあります。

var の場合

var で宣言された変数は、スコープの最上部に巻き上げられますが、初期化は実際の宣言位置で行われます。

1
console.log(x); // undefined
2
var x = 5;
3
console.log(x); // 5

var の巻き上げの具体例

以下のコードを考えてみます。

1
var username = "global";
2
console.log(username);
3
function showName() {
4
    console.log(username);
5
    var username = "local";
6
    console.log(username);
7
}
8

9
showName();

このコードの実行結果は以下のようになります。

1
global
2
undefined
3
local

2行目がundefinedになる理由:

1. var username は関数スコープ内で巻き上げられます。そのため、showName 内で var username; が関数の先頭に移動したとみなされます。
2. しかし、変数の初期化（代入）はその場で行われるため、console.log(username); の時点では username は undefined になっています。
3. username = "local"; が実行された後、console.log(username); により "local" が出力されます。

このように var はスコープの先頭に巻き上げられるため、意図しない undefined が出力されることがあります。そのため、通常は let や const を使用することが推奨されます。

let・const の場合

let や const で宣言された変数も巻き上げられますが、それらは「一時的デッドゾーン（TDZ: Temporal Dead Zone）」に入り、初期化されるまでアクセスできません。

letの場合

1
console.log(y); // ReferenceError: Cannot access 'y' before initialization
2
let y = 10;
3
console.log(y); // 10

constの場合

1
console.log(y); // ReferenceError: Cannot access 'y' before initialization
2
const y = 10;
3
console.log(y); // 10

まとめ

• スコープ・再宣言・再代入の自由度はvar ＞ let ＞ constとなる。
• varの再宣言や関数スコープは、意図しないバグを引き起こす場合があるため、基本的にはletやconstの利用が推奨される。

スポンサーリンク