【サクッと解説】JavaScriptの変数宣言（var, let, const）の違い

2025年8月5日

1. 本記事のポイント

JavaScriptの変数宣言に使われる var, let, const の違いを正確に整理
スコープ、再代入可否、巻き上げ（ホイスティング）などの仕様差を明示
実務での使い分け判断と注意点をサンプルコード付きで解説

2. JavaScriptの変数宣言（var, let, const）とは？

JavaScriptでは、変数を宣言する方法として var, let, const の3種類が存在します。

varはES5以前から使われていた旧来の宣言方法で、関数スコープと巻き上げの特性があります。ES6（ECMAScript 2015）からは let と const が導入され、ブロックスコープを持つ宣言が可能になりました。

実務では、再代入の必要がある変数には let を、再代入不要な定数的な変数には const を使うのが一般的です。varは歴史的な理由がない限り、現在では推奨されません。

3. 詳細解説

スコープの違い（varは関数スコープ、let/constはブロックスコープ）

次のコードは、スコープの違いによる挙動差を示します。

JavaScript

function exampleVar() {
  if (true) {
    var x = 10; // 関数スコープ
  }
  console.log(x); // 10（varは関数スコープのためアクセス可能）
}
exampleVar();

function exampleLet() {
  if (true) {
    let y = 20; // ブロックスコープ
  }
  console.log(y); // ReferenceError（yはif文の外からは見えない）
}
exampleLet();

function exampleVar() {
  if (true) {
    var x = 10; // 関数スコープ
  }
  console.log(x); // 10（varは関数スコープのためアクセス可能）
}
exampleVar();

function exampleLet() {
  if (true) {
    let y = 20; // ブロックスコープ
  }
  console.log(y); // ReferenceError（yはif文の外からは見えない）
}
exampleLet();

再代入・再宣言の可否

constは再代入も再宣言も不可、letは再代入可・再宣言不可、varは両方可という違いがあります。

JavaScript

var a = 1;
var a = 2; // OK（再宣言可能）

let b = 1;
b = 2;     // OK（再代入可能）
// let b = 3; // SyntaxError（再宣言は不可）

const c = 1;
// c = 2;     // TypeError（再代入不可）
// const c = 3; // SyntaxError（再宣言不可）

var a = 1;
var a = 2; // OK（再宣言可能）

let b = 1;
b = 2;     // OK（再代入可能）
// let b = 3; // SyntaxError（再宣言は不可）

const c = 1;
// c = 2;     // TypeError（再代入不可）
// const c = 3; // SyntaxError（再宣言不可）

ホイスティング（巻き上げ）の違い

varは宣言が巻き上げられ、初期化は巻き上げられません。一方、letとconstは一時的死角（TDZ）により、使用前にエラーになります。

JavaScript

console.log(foo); // undefined（varは宣言のみ巻き上げ）
var foo = 123;

// console.log(bar); // ReferenceError（letはTDZの影響）
let bar = 456;

console.log(foo); // undefined（varは宣言のみ巻き上げ）
var foo = 123;

// console.log(bar); // ReferenceError（letはTDZの影響）
let bar = 456;

4. よくあるミス・誤解・落とし穴

constでオブジェクトを定義した際にプロパティの変更ができる点は誤解されやすいです。constは変数の再代入を禁止しているだけで、オブジェクトのミューテーションは制限しません。

JavaScript

const obj = { a: 1 };
obj.a = 2; // OK（プロパティの変更は可能）
obj = {}; // TypeError（オブジェクト全体の再代入は不可）

const obj = { a: 1 };
obj.a = 2; // OK（プロパティの変更は可能）
obj = {}; // TypeError（オブジェクト全体の再代入は不可）

ブロックスコープの影響で、for文の中で let を使うとループごとにスコープが生成されます。

JavaScript

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
} // 0, 1, 2 と出力される

for (var j = 0; j < 3; j++) {
  setTimeout(() => console.log(j), 100);
} // 3, 3, 3 と出力される

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
} // 0, 1, 2 と出力される

for (var j = 0; j < 3; j++) {
  setTimeout(() => console.log(j), 100);
} // 3, 3, 3 と出力される