宣言と代入の違い
変数には「宣言」と「代入」という別の操作があります。宣言は“箱を作る”こと、代入は“箱に値を入れる”ことです。この区別がわかると、未定義エラーや意図しない値の混入を防げます。
概念の整理
- 宣言: 変数の存在をプログラムに知らせる操作。まだ値はない。
let x; // 宣言（値は未定義）
- 代入: すでに存在する変数に値を入れる（更新する）操作。
x = 10; // 代入（初めて値が入る）
- 宣言と代入を同時に（初期化）:
let y = 20; // 宣言＋代入（初期化）
宣言の種類（let / const / var）
- let: ブロックスコープ。宣言後に代入や再代入が可能。
let count;
count = 1;
count = 2;
- const: ブロックスコープ。再代入不可。宣言時の初期化が必須。
// const a; // エラー（初期化が必要）
const a = 5; // 宣言＋代入のみ
// a = 6; // エラー（再代入不可）
- var: 関数スコープ。巻き上げや再宣言が可能で、予期せぬ挙動の原因になりやすい（基本は使わない）。
console.log(v); // undefined（宣言が巻き上げられる）
var v = 3;
代入と再代入の具体例
- 最初の代入（初期化）:
let price;
price = 1000; // 最初の代入
- 再代入（値の更新）:
let msg = "hello";
msg = "hi"; // 再代入（OK）
- constに対する“中身の変更”（参照は不変、内部は可変）:
const user = { name: "Taro" };
user.name = "Hanako"; // OK（オブジェクトのプロパティ更新）
/* user = { name: "Jiro" }; */ // NG（参照の再代入）
よくある落とし穴
- TDZ（Temporal Dead Zone）: let/const は宣言前に参照するとエラー。
// console.log(x); // エラー（TDZ）
let x = 1;
- 未定義（undefined）の計算: 宣言だけの変数は undefined。数値計算は NaN になりがち。
let total;
console.log(total + 100); // NaN
- constは必ず初期化: 値なし宣言はできない。
- varの再宣言とブロックスコープ非対応:
var a = 1;
var a = 2; // 再宣言できてしまう（推奨されない）
if (true) { var b = 3; }
console.log(b); // 3（ブロック外からも見える）
実践パターンとテクニック
- 基本方針: 変わらないものは const、変えるものは let。可能なら宣言時に初期化。
const TAX_RATE = 0.1;
let total = 0;
- 宣言→安全な代入（デフォルト値を使う）:
let amount; // まだ未定義
const safeAmount = amount ?? 0; // undefined/null のとき 0
- 分割代入（宣言＋代入を読みやすく）：
const [x, y] = [10, 20]; // 配列
const { name, age = 0 } = { name: "Taro" }; // オブジェクト（デフォルト付き）
- 多重代入（評価は右から左）：
let a, b, c;
a = b = c = 0; // すべて 0
ミニ練習
- 問1: 次の出力は？
let x;
console.log(x); // ?
x = 5;
console.log(x); // ?
解答: undefined / 5
- 問2: エラーになる行はどれ？
const PI = 3.14;
// const PI = 3.14159; // ?
let n = 1;
n = 2; // ?
解答: const の再宣言はエラー。let の再代入はOK。
- 問3: 未定義による NaN を避ける書き方に直せ。
let price;
console.log(price + 100); // NaN
解答例:
let price = 0; // 初期化
// または
let price;
console.log((price ?? 0) + 100);
- 問4: 分割代入で宣言と代入を同時に行い、age が未設定なら 0 にせよ。
const user = { name: "Hanako" };
const { name, age = 0 } = user;
まとめ
- 宣言は変数の“箱”を作ること、代入はその箱に値を入れること。
- let/const はブロックスコープ。const は初期化必須・再代入不可。
- 未定義のまま使うとバグの原因。初期化や ?? で安全に。
- var は巻き上げや再宣言で混乱しやすいため、基本は使わない。