JavaScript入門：初期化と未定義
変数を作るときに必ず出てくるのが「初期化」と「未定義（undefined）」です。ここを理解すると、思わぬバグを大幅に減らせます。
用語の整理
- 初期化: 変数を宣言すると同時に、最初の値を入れること
let x = 10; // 初期化済み - 未定義（undefined）: 変数はあるけれど、まだ値が入っていない状態
let y; // 宣言のみ（未定義） console.log(y); // undefined
例で理解する宣言・代入・初期化
let a; // **宣言**（未定義）
a = 5; // **代入**（初めて値が入る）
let b = 20; // **宣言＋初期化** を同時に
console.log(a, b); // 5 20
- ポイント: 宣言だけの変数は自動的に
undefined。そのまま計算に使うとNaN（数でない）になることがある。
let price;
console.log(price + 100); // NaN（undefined + 数値）
undefined と null の違い
- undefined: 「まだ値を設定していない」自動的な未定義
- null: 「意図的に空を入れた」開発者が意味を持って設定した“空”
let x; // undefined（未設定）
let y = null; // null（意図的に空）
console.log(x); // undefined
console.log(y); // null
- 使い分けの指針:
- undefined: 未初期化・存在しないプロパティの自然な結果
- null: 「今は値がない」と明確に示したいとき（例：選択未済）
よくある落とし穴
- 未初期化のまま使う
- 対策: 初期値を入れる、または存在チェックをしてから使う
let total;
// total を使ってしまう
if (total > 0) { // total は undefined → 比較は false
console.log("positive");
}
- プロパティが存在しない
- 対策: 存在確認してから使う、デフォルト値を用意
const user = { name: "Taro" };
console.log(user.age); // undefined（プロパティがない）
便利テクニック（未定義対策）
- デフォルト値（null合体演算子）
const input = undefined;
const value = input ?? 0; // undefined or null のときだけ 0
console.log(value); // 0
- 論理ORの注意点
const page = 0;
const current = page || 1; // 0 は falsy → 1 になってしまう（意図と違うことがある）
const currentSafe = page ?? 1; // 0 を有効値として扱える
- 存在チェック（オプショナルチェーン）
const user = {};
console.log(user.profile?.age ?? "不明"); // "不明"
TDZ（Temporal Dead Zone）と未定義の違い
- 未定義（undefined）: 宣言はされているが、値がない状態
- TDZ:
let/constは「宣言前にアクセス」するとエラーになる特別な期間
// console.log(a); // ここで a は TDZ → エラー
let a = 1;
console.log(a); // 1
// var は TDZがなく、undefined になる（推奨されない）
console.log(b); // undefined（巻き上げ）
var b = 2;
初心者向けベストプラクティス
- 原則として即初期化する
- ラベル: 可能なら宣言時に初期値を入れる
let count = 0; // 数値は0
let message = ""; // 文字列は空
let items = []; // 配列は空配列
let user = null; // 意図的な「不在」は null
- constを基本に、変わるならlet
const TAX_RATE = 0.1;
let total = 0;
- 未定義を使わないロジックにする
- ラベル: デフォルト値（??）や初期化で回避
ミニ練習
- 問1: 以下の出力は？
let x;
console.log(typeof x); // ?
console.log(x === undefined); // ?
解答:typeof x → "undefined"x === undefined → true
- 問2:
undefinedを避ける初期化
let list;
// list を安全に使うには？
list = []; // 初期化
list.push("item");
- 問3: デフォルト値を入れて安全に足し算
let amount;
const safeAmount = amount ?? 0;
console.log(safeAmount + 100); // 100
まとめ
- 初期化: 宣言と同時に値を入れる。未定義バグを防げる。
- undefined: 未設定・存在しない結果。計算に使うと
NaNなどの原因。 - null: 意図的な「空」。状態を明示したいときに使う。
- TDZ:
let/constを宣言前に使うとエラー。varは使わない。 - 実践: 即初期化＋
??（null合体）＋オプショナルチェーンで安全に。