JavaScript入門：Undefined（未定義）とは
Undefinedは「変数やプロパティが存在はするけれど、まだ値が設定されていない」状態を表す特別な値です。意図的な「空」を示す null と違い、未設定や存在しない結果として自然に現れます。
概念と発生する場面
- 未初期化の変数:
let a;
console.log(a); // undefined
- 存在しないプロパティ参照:
const user = { name: "Taro" };
console.log(user.age); // undefined（ageプロパティがない）
- 戻り値を返さない関数:
function log(x) { console.log(x); }
console.log(log(123)); // undefined（returnなし）
- 引数が渡されなかったとき:
function greet(name) { console.log(name); }
greet(); // undefined
- 配列の“穴”や範囲外アクセス:
const arr = [10];
arr[2] = 30; // [10, <1 empty item>, 30]
console.log(arr[1]); // undefined
console.log(arr[99]); // undefined
undefined と null の違い
- 意味の違い:
- undefined: 未設定・不在（自然に発生）
- null: 意図的な「空」（開発者が代入）
- 比較のポイント:
console.log(undefined == null); // true（ゆるい等価）
console.log(undefined === null); // false（型が違う）
- 使い分けの指針:
- 意図を示すなら null、未設定や不在の自然な結果は undefined のまま受け取る。
型と真偽値、演算での挙動
- 型判定:
let x;
console.log(typeof x); // "undefined"
console.log(x === undefined); // true
- 真偽値変換（falsy）:
console.log(Boolean(undefined)); // false
- 数値演算の注意（NaNになりやすい）:
let price;
console.log(price + 100); // NaN（undefinedを数値に混ぜると危険）
安全に扱うテクニック
- デフォルト値（null合体演算子 ??）: undefined/null のときだけ右側を使う
let page; // undefined
const current = page ?? 1; // 1
- 論理OR（||）の注意点: 0 や空文字 “” も falsy として右側へ倒れる
const count = 0;
console.log(count || 10); // 10（意図外）
console.log(count ?? 10); // 0（意図通り）
- オプショナルチェーン（?.）で安全に辿る:
const config = {};
console.log(config.server?.timeout ?? 3000); // 3000
- 関数引数のデフォルト値で未定義を吸収:
function add(a = 0, b = 0) {
return a + b;
}
console.log(add(undefined, 5)); // 5（undefinedはデフォルトに置き換わる）
スコープと巻き上げ（hoisting）の挙動
- var の巻き上げ: 宣言が先に解釈され、初期値は undefined
console.log(v); // undefined（宣言は前倒しされる）
var v = 3;
- let/const の TDZ（Temporal Dead Zone）: 宣言前アクセスはエラー
// console.log(a); // ReferenceError（TDZ）
let a = 1;
実用パターンとベストプラクティス
- 原則即初期化: 可能なら宣言時に初期値を入れる
let total = 0;
let message = "";
let items = [];
let selected = null; // 意図的な「空」
- 存在チェックを明確に:
if (value === undefined) {
// 未設定時の処理
}
- 値の読み取りは安全に:
const timeout = settings?.timeout ?? 3000;
よくあるつまずき
- undefined と NaN の混同: 未定義をそのまま計算に使うと NaN が出る。計算前にデフォルトを適用。
- == による曖昧比較:
undefined == nullは true。厳密な比較===を使う。 - || の過剰な使用: 0 や “” を有効値にしたいときは
??を使う。
ミニ練習
- 問1: 次の出力は？
let x;
console.log(x, typeof x, x === undefined);
解答: undefined "undefined" true
- 問2: 未定義を安全に足し算する
let amount;
const result = (amount ?? 0) + 100;
console.log(result); // 100
- 問3: ネストしたプロパティを安全に参照し、未定義なら “N/A”
const user = {};
const age = user.profile?.age ?? "N/A";
console.log(age); // "N/A"
- 問4: 引数が未定義でも動く関数を作る
function greet(name = "(不明)") {
return `Hello, ${name}`;
}
console.log(greet()); // Hello, (不明)
console.log(greet("Taro")); // Hello, Taro
まとめ
- undefined は「未設定・不在」の自然な結果。
- null は「意図的に空」。違いを理解して使い分ける。
- 計算や表示の前に
??と?.で安全に扱う。 - 巻き上げと TDZ を意識し、宣言は即初期化が基本。