スコープと var / let / const の違い — var は関数スコープ、let / const はブロックスコープ
JavaScript で変数を宣言するときに使うキーワードは var / let / const の3種類があります。
初心者が混乱しやすいのが「スコープ（有効範囲）」の違いです。
基本の違い
| キーワード | スコープの種類 | 再宣言 | 再代入 | 特徴 |
|---|---|---|---|---|
var | 関数スコープ | 可能 | 可能 | 古い書き方。ブロック {} を無視する |
let | ブロックスコープ | 不可 | 可能 | 現代的な変数宣言。ブロックごとに有効 |
const | ブロックスコープ | 不可 | 不可 | 定数。値を変えられない（ただしオブジェクトの中身は変更可能） |
コード例で理解する
1. var は関数スコープ
function testVar() {
if (true) {
var x = 1; // ifブロック内で宣言
}
console.log(x); // → 1 （ブロックを抜けても使える）
}
testVar();
- ポイント:
varは「関数全体」で有効。ifやforの中で宣言しても外で使える。
2. let / const はブロックスコープ
function testLetConst() {
if (true) {
let y = 2;
const z = 3;
console.log(y, z); // → 2 3
}
console.log(y); // エラー: y is not defined
}
testLetConst();
- ポイント:
let/constは「ブロック{}の中だけ」で有効。外に出ると消える。
3. 再宣言と再代入の違い
var a = 1;
var a = 2; // 再宣言OK
console.log(a); // → 2
let b = 1;
// let b = 2; // エラー: 再宣言不可
b = 2; // 再代入はOK
console.log(b); // → 2
const c = 1;
// const c = 2; // エラー: 再宣言不可
// c = 2; // エラー: 再代入不可
console.log(c); // → 1
よく使うテンプレート集
forループでの違い
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log("var:", i), 100);
}
// → var: 3, var: 3, var: 3 （全部3）
for (let j = 0; j < 3; j++) {
setTimeout(() => console.log("let:", j), 100);
}
// → let: 0, let: 1, let: 2 （期待通り）
- 理由:
varはループ全体で1つの変数。letはループごとに新しい変数。
定数オブジェクトの中身は変更可能
const obj = { name: "Aki" };
obj.name = "Mika"; // プロパティは変更できる
console.log(obj.name); // → "Mika"
例題: 簡易カウンター
function makeCounter() {
let count = 0; // ブロックスコープで外から触れられない
return () => ++count;
}
const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2
- 効果:
countはletで宣言されているので外から直接アクセスできない。 - ポイント:
varだとスコープが広すぎて意図せず外から触れてしまうことがある。
実務でのコツ
- 基本は
let/constを使う。 varは古いコードでしか使わない。- 値を変えないなら
const、変えるならlet。 - ブロックスコープを意識するとバグが減る。
ありがちなハマりポイントと対策
varで意図せず上書き:- 対策:
let/constを使う。
- 対策:
constでオブジェクトを変更できるのに驚く:- 対策: 「変数の再代入不可」であって「中身の変更不可」ではない。
- ループで
varを使うと値が共有される:- 対策:
letを使う。
- 対策:
練習問題（スコープ確認）
function scopeTest() {
if (true) {
var x = "var変数";
let y = "let変数";
const z = "const変数";
}
console.log(x); // → "var変数"
console.log(y); // エラー
console.log(z); // エラー
}
scopeTest();
- 効果:
varは関数スコープなので外でも使えるが、let/constはブロック内だけ。
直感的な指針
var= 古い書き方。関数スコープ。let= 現代的な変数。ブロックスコープ。const= 定数。ブロックスコープ。- 基本は
const、必要ならlet。varは使わない。
これを覚えれば「変数の有効範囲」「再代入の可否」を理解でき、バグの少ないコードが書けるようになります。