JavaScriptで undefined を見かけて「これは何？」と思ったことはありませんか？
undefined は「値が定義されていない」ことを示す特別な値です。エラーではなく、JavaScript が「ここにはまだ何も入っていませんよ」と教えてくれているサインです。
この記事では、undefined の意味・発生するケース・判定方法・null との違い・回避テクニックまで、コード例付きで網羅的に解説します。
undefinedとは？
undefined は JavaScript のプリミティブ型の1つで、変数や引数に値がまだ代入されていない状態を表します。
let x; console.log(x); // undefined console.log(typeof x); // "undefined"
ポイントは以下の3つです。
- 型（type）も値（value）も
undefined - エラーではなく「値なし」を表す正常な状態
- Boolean に変換すると
false（falsy な値）
undefinedが発生する6つのケース
undefined は以下のようなケースで発生します。それぞれコード例で確認しましょう。
1. 変数を宣言したが値を代入していない
最も基本的なケースです。let や var で変数を宣言しただけでは、初期値は undefined になります。
let name; console.log(name); // undefined var age; console.log(age); // undefined
※ const は宣言時に値が必須なので、undefined にはなりません。
2. 存在しないオブジェクトのプロパティにアクセス
オブジェクトに存在しないプロパティを参照すると undefined が返ります。
const user = { name: "太郎", age: 25 };
console.log(user.email); // undefined（emailプロパティは存在しない）
3. 関数の引数が渡されなかった
関数を呼び出す際に引数を省略すると、その引数は undefined になります。
function greet(name) {
console.log(name);
}
greet(); // undefined（引数なしで呼び出し）
greet("太郎"); // "太郎"
4. 関数にreturn文がない（戻り値がundefined）
関数が値を返さない場合、戻り値は自動的に undefined になります。
function doSomething() {
// returnがない
}
const result = doSomething();
console.log(result); // undefined
5. 配列の存在しないインデックス
配列の範囲外のインデックスにアクセスすると undefined が返ります。
const fruits = ["りんご", "バナナ", "みかん"]; console.log(fruits[0]); // "りんご" console.log(fruits[5]); // undefined（インデックス5は存在しない）
6. void演算子
void 演算子は常に undefined を返します。
console.log(void 0); // undefined console.log(void "hello"); // undefined
undefinedの判定方法
変数が undefined かどうかを確認する方法は主に2つあります。
方法1: === で直接比較
厳密等価演算子（===）で undefined と比較する方法です。最もシンプルで推奨される書き方です。
let value;
if (value === undefined) {
console.log("値は未定義です");
}
方法2: typeof で型を確認
typeof 演算子を使う方法です。宣言されていない変数に対しても安全に使えるメリットがあります。
// 宣言されていない変数でもエラーにならない
if (typeof unknownVar === "undefined") {
console.log("変数は未定義です");
}
// === で比較するとエラーになる
// if (unknownVar === undefined) { } // ReferenceError!
どちらを使うべき？
| 方法 | メリット | デメリット |
|---|---|---|
=== undefined |
シンプルで読みやすい | 未宣言の変数には使えない |
typeof === "undefined" |
未宣言でも安全 | やや冗長 |
通常のコードでは === undefined で十分です。ライブラリ開発など変数の存在が保証できない場合は typeof を使いましょう。
undefinedとnullの違い
undefined と似た値に null があります。どちらも「値がない」ことを表しますが、意味が異なります。
| 比較項目 | undefined | null |
|---|---|---|
| 意味 | 値がまだ代入されていない | 値が意図的に空にされている |
| 型（typeof） | "undefined" |
"object" ※仕様上のバグ |
| 設定者 | JavaScriptエンジンが自動設定 | 開発者が明示的に設定 |
| 数値変換 | NaN |
0 |
// == では等しいが、=== では等しくない console.log(undefined == null); // true console.log(undefined === null); // false // 数値変換の違い console.log(Number(undefined)); // NaN console.log(Number(null)); // 0
使い分けのコツ：「意図的に空にした」ことを明示したい場合は null を、それ以外は JavaScript に任せて undefined のままにするのが一般的です。
undefinedを防ぐテクニック
undefined が原因のエラーを防ぐための実践的なテクニックを紹介します。
デフォルト引数（ES6）
関数の引数にデフォルト値を設定しておくと、引数が渡されなかった場合でも undefined になりません。
function greet(name = "ゲスト") {
console.log(`こんにちは、${name}さん！`);
}
greet(); // "こんにちは、ゲストさん！"
greet("太郎"); // "こんにちは、太郎さん！"
オプショナルチェーン（?.）
ネストしたオブジェクトのプロパティに安全にアクセスできます。途中で undefined や null があっても、エラーにならずに undefined を返します。
const user = { name: "太郎" };
// オプショナルチェーンなし → エラー
// console.log(user.address.city); // TypeError!
// オプショナルチェーンあり → 安全
console.log(user.address?.city); // undefined（エラーにならない）
Null合体演算子（??）
値が undefined または null の場合にデフォルト値を設定できます。
const input = undefined; const value = input ?? "デフォルト値"; console.log(value); // "デフォルト値" // || との違い：0 や空文字を有効な値として扱える const count = 0; console.log(count || 10); // 10（0がfalsyなのでデフォルト値になる） console.log(count ?? 10); // 0 （0はnullでもundefinedでもないので維持）
分割代入のデフォルト値
オブジェクトの分割代入でもデフォルト値を指定できます。
const config = { theme: "dark" };
const { theme, lang = "ja" } = config;
console.log(theme); // "dark"
console.log(lang); // "ja"（configにlangがないのでデフォルト値）
よくあるエラーと対処法
undefined に関連してよく遭遇するエラーと、その対処法を紹介します。
Cannot read properties of undefined
undefined のプロパティにアクセスしようとすると発生するエラーです。
// エラーの例 let user = undefined; console.log(user.name); // TypeError: Cannot read properties of undefined // 対処法：オプショナルチェーンを使う console.log(user?.name); // undefined（エラーにならない）
undefined is not a function
undefined を関数として呼び出そうとすると発生するエラーです。
// エラーの例
const obj = {};
obj.doSomething(); // TypeError: obj.doSomething is not a function
// 対処法：関数の存在を確認してから呼び出す
if (typeof obj.doSomething === "function") {
obj.doSomething();
}
まとめ
| 項目 | 内容 |
|---|---|
| undefinedとは | 値が未定義であることを示す特別な値 |
| 発生するケース | 未代入の変数、存在しないプロパティ、省略された引数など |
| 判定方法 | === undefined または typeof === "undefined" |
| nullとの違い | undefinedは自動設定、nullは意図的に設定 |
| 防ぐテクニック | デフォルト引数、?.、?? |
undefined は JavaScript の基本中の基本です。発生するパターンを理解し、適切に判定・回避できるようになれば、バグの少ない安定したコードが書けるようになります。
