【JavaScript】var,let,constの違い

varは関数スコープで再宣言・再代入が可能で、letはブロックスコープで再宣言が不可ですが、再代入は可能です。
constはブロックスコープで再宣言・再代入いずれもできません。

var,let,constの違い

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

var変数

• JavaScriptで宣言できるローカル変数
• 宣言された関数内で利用できる（ブロック外から参照可能）
• 再宣言・再代入ともに可能

var再宣言(実行コード)

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

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

var再宣言(実行結果)

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

2

var再代入(実行コード)

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

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

var再代入(実行結果)

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

3

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

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

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

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

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

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

let変数

• JavaScriptで宣言できるローカル変数
• 宣言されたブロック{ } 内でのみ利用できる
• 再宣言は不可であるが、再代入は可能

let再宣言(実行コード)

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

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

let再宣言(実行結果)

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

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

SyntaxError: Identifier 'hoge' has already been declared

let再代入(実行コード)

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

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

let再代入(実行結果)

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

3

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

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

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

letスコープ(実行結果)

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

console.log(num);
            ^

ReferenceError: num is not defined

const定数

• JavaScriptで宣言できる定数
• 宣言されたブロック{ } 内でのみ利用できる
• 再宣言・再代入ともに不可

const再宣言（実行コード）

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

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

const再宣言（実行結果）

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

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

SyntaxError: Identifier 'hoge' has already been declared

const再代入（実行コード）

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

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

const再代入（実行結果）

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

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

TypeError: Assignment to constant variable.

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

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

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

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

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

console.log(num);
            ^

ReferenceError: num is not defined

まとめ

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

スポンサーリンク