JavaScriptのnullとundefinedの違い・判定方法・使い分け

「何もない」を表す2つの値

多くの言語では「値がない」を表すものは1つだけですが、JavaScriptには null と undefined という2つがあります。両者は紛らわしいほど似た振る舞いをする一方で、微妙に違うせいでベテラン開発者でもつまずくことがあります。この違いをきちんと押さえておくのは、10分の投資に見合う価値があります。

ざっくり言うと、こうです。

• undefined は、何かが欠けているときにJavaScriptが勝手に割り当てる値。
• null は、「意図的に空にしておく」と自分で明示的に書く値。

let x;
console.log(x);           // undefined — 宣言されたが、代入されていない

const user = { name: "Rosa" };
console.log(user.age);    // undefined — プロパティが存在しない

function greet(name) {
  console.log(name);
}
greet();                  // undefined — 引数が渡されていない

const chosen = null;
console.log(chosen);      // null — 自分で設定した値

パターンに気づきましたか？上で出てきた undefined は、どれも JavaScript が値を見つけられなかったケースです。一方 null は、誰かが明示的に書いたから存在するんです。

undefined が現れる場面

undefined が登場するシチュエーションはいくつか決まっていて、どれも「値が用意されていない」バリエーションです。

// 1. 初期化子のない宣言された変数
let a;
console.log(a);                    // undefined

// 2. 存在しないオブジェクトのプロパティ
const obj = { x: 1 };
console.log(obj.y);                // undefined

// 3. 渡されなかった関数の引数
function f(x, y) { return y; }
console.log(f(1));                 // undefined

// 4. return 文のない関数
function g() {}
console.log(g());                  // undefined

// 5. 存在しない配列の要素
const arr = [1, 2];
console.log(arr[5]);               // undefined

いずれのケースでも、JavaScript は値を取りに行ったものの、そこに何もなかったというだけの話です。undefined は「探したけど値がなかったよ」というエンジンからのサインだと思ってください。

もちろん自分で undefined を代入することもできます（let x = undefined; のように）。ただし、やらないほうが無難です。undefined は「JavaScript が何も見つけられなかった」というシグナルとして残しておき、自分の意思で「値がない」ことを示したいときは null を使いましょう。これが null と undefined の使い分けの基本です。

null はどこから来るのか

null は、誰かが明示的に書いたときにしか現れません。つまり、そこがポイントで、意図的に「値がない」ことを示すための目印なのです。

// "まだログインしているユーザーはいません。"
let currentUser = null;

// その後、ユーザーがログインします。
currentUser = { name: "Boris" };

// そしてログアウトします。
currentUser = null;

DOMのAPIではnullがよく使われます。例えばdocument.getElementById("missing")の戻り値はundefinedではなくnullです。これはブラウザが「探したけど、該当する要素はなかったよ」と明示的に伝えているからです。JSON.parse("null")も同様にnullを返します。そもそもJSONにはundefinedという概念がないんですね。

イメージとしてはこうです。undefinedは「デフォルトの不在」、nullは「意図的な不在」。

typeof の落とし穴

有名なやつです。

console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object"   ← ???

typeof null が "object" を返すのは、実は1995年から残っているバグなんです。修正してしまうと既存のサイトが軒並み壊れてしまうため、そのまま放置され続けています。とはいえ null はオブジェクトでは ありません 。undefined や数値、文字列、真偽値と同じくプリミティブ値です。typeof の結果が嘘をついているだけ、というわけですね。

実用面での影響としては、null の判定に typeof はまったく使えません。素直に比較演算子で調べましょう。

const value = null;

if (value === null) {
  console.log("null です");
}

if (typeof value === "undefined") {
  console.log("undefined です");
}

もっと多い使い方としては、両方をまとめて判定するパターン——次のセクションで見ていきましょう。

== null で両方まとめて判定する

実際のコードでは、値が null なのか undefined なのかを区別する必要はほとんどありません。使う前に「値が入っていないかどうか」を確認したいだけ、というケースが大半です。そんなときの定番は、null との緩い等価比較（==）です。

function describe(value) {
  if (value == null) {
    return "何もありません";
  }
  return `値: ${value}`;
}

console.log(describe(null));         // 何もありません
console.log(describe(undefined));    // 何もありません
console.log(describe(0));            // 値: 0
console.log(describe(""));           // 値:
console.log(describe("hello"));      // 値: hello

value == null は、値が null または undefined のときだけ true になり、それ以外（0、""、false など）はすべて false になります。たいていの場面ではこの挙動こそが欲しいものです。=== ではなく == を使うのが推奨される、数少ないケースのひとつですね。リンターもこれを理解していて、ちゃんと許容してくれます。

もっと明示的に書きたいなら、value === null || value === undefined と書けば同じ意味になりますし、読み手にも意図が伝わりやすいです。

Nullish 演算子：?? と ?.

null と undefined を扱いやすくするために、専用の演算子が2つ追加されました。どちらもこの2つの値を同じものとして扱い、それ以外の値はそのまま素通りさせます。

Nullish 合体演算子（??） は、左辺が null または undefined のときだけフォールバック値を返します。

const config = { retries: 0, timeout: null };

const retries = config.retries ?? 3;     // 0 (nullishではない — そのまま保持)
const timeout = config.timeout ?? 5000;  // 5000 (nullだった)
const name = config.name ?? "guest";     // "guest" (undefinedだった)

console.log(retries, timeout, name);

|| と比較してみてください。|| なら 0 は falsy なので 3 に置き換わってしまいます。?? はもっと厳格で、null・undefined の2つだけに反応します。

オプショナルチェーン（?.） は、チェーンの途中で null や undefined に遭遇すると、そこで評価を打ち切って undefined を返します。

const user = { profile: null };

console.log(user.profile?.name);        // undefined (クラッシュしない)
console.log(user.settings?.theme);      // undefined (クラッシュしない)
console.log(user?.profile?.name);       // undefined

どちらの演算子も「この値は nullish なのか？」という頻出のチェックをラクに書くために用意されています。詳しい使い方はカリキュラムの後半でじっくり扱います。

デフォルト引数が効くのは undefined のときだけ

地味ですが重要なルールがあります。関数のデフォルト引数が適用されるのは undefined が渡されたときだけで、null には発動しません。

function greet(name = "friend") {
  console.log(`Hello, ${name}`);
}

greet();             // Hello, friend
greet(undefined);    // Hello, friend
greet(null);         // Hello, null   ← デフォルト値は適用されない

null を渡すと「値を設定しないことを明示的に選んだ」と見なされ、そのまま尊重されます。null の場合もデフォルト値にフォールバックさせたいなら、関数内で ?? を使いましょう。

function greet(name) {
  const display = name ?? "friend";
  console.log(`Hello, ${display}`);
}

greet(null);         // Hello, friend

この違いは本当に多くの人がハマるポイントです。デフォルト値は「引数が渡されていない」ケースを埋めるもので、?? は「nullish な値」を埋めるもの。役割が違います。

JSON に undefined が存在しない問題

JSON には null はありますが、undefined はありません。そのため、シリアライズするときに気づかないうちにハマることがあります。

const data = {
  name: "Rosa",
  age: undefined,
  nickname: null,
};

console.log(JSON.stringify(data));
// {"name":"Rosa","nickname":null}

age フィールドがまるごと消えてしまいました。JSON.stringify は値が undefined のプロパティを捨ててしまうからです。一方、null は JSON が正式にサポートしているので残ります。オブジェクトを JSON に通して戻すと、undefined のプロパティが気づかないうちに消えてしまう——これはよくある落とし穴です。

配列の場合、undefined は null に変換されます:

console.log(JSON.stringify([1, undefined, 3]));
// [1,null,3]

APIのペイロードを設計するときは、「値なし」を表すフィールドには undefined ではなく null を使うのがおすすめです。こちらなら通信を経ても消えずに残ります。

null と undefined の使い分け

自分のコードで採用するなら、こんなルールが現実的です。

• undefined は「そもそも与えられていない」を表す — 引数が渡されていない、変数が未代入、プロパティが存在しない、といったケース。自分で undefined を明示的に代入するのは避けます。
• null は「意図的に空であることをはっきり示したい」ときに使う — ログアウト状態のユーザー、未選択のオプション、クリアされたフォーム欄など。
• API の境界では両方を受け入れる(== null や ?? を使う)。ただし、自分が 返す 側は必ずどちらか一方に統一しましょう。

スタイルガイドによっては(TypeScript のガイドラインなど)null を一切使わず undefined だけで通すものもあります。これも一理あって、値が 2 種類より 1 種類の方がシンプルです。プロジェクトごとに方針を決めて、全体で揃えるのが大事です。

次回:型変換(Type Coercion)

null と undefined は、JavaScript が数値・文字列・真偽値に変換するときにそれぞれ独特の挙動を見せます。たとえば Number(null) は 0 なのに、Number(undefined) は NaN。こうした非対称さが、実際のバグの原因になったりします。次は型変換(Type Coercion)の話です。ルール全体が見えてくると、JavaScript の「クセ」と思っていた挙動の多くが、意外とスッキリ腑に落ちるはずです。