null と undefined を見分ける｜コードで実践

null と undefined を見分けるとは

似て非なる null と undefined の違いを判定する関数を書く。本レッスンでは、null と undefined を見分けるの基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。

null と undefined を見分ける

JavaScript には「値が無い」ことを表す 2 つの値、null と undefined があります。どちらも falsy で、初心者からは似たもの同士に見えますが、意味と発生する状況がはっきり異なります。本レッスンでは 2 つの違いを整理し、判定する関数を書きます。

ポイント undefined は「まだ値が入っていない」、null は「意図的に空を入れた」状態です。

undefined はいつ現れるか

undefined は JavaScript エンジンが自動的に作る値です。次のような場面で発生します。

変数を let value; のように 宣言だけして初期化しない とき
関数の 戻り値を return しない とき
関数の 引数を渡さなかった とき
オブジェクトの 存在しないプロパティ を参照したとき

JavaScript

let x;
console.log(x); // undefined

function noReturn() {}
console.log(noReturn()); // undefined

const user = { name: "なお" };
console.log(user.age); // undefined

null はいつ使うか

一方 null は 開発者が明示的に書く 値です。「ここには値があるべきだが、まだ用意できていない」「意図的に空を入れている」というニュアンスを表現したいときに使います。たとえば「ログイン前のユーザー」を null、「ログイン後のユーザーオブジェクト」を { id, name } で表すといった具合です。

JavaScript

let currentUser = null;          // 未ログイン状態を意図して null にする
currentUser = { id: 1, name: "なお" };
console.log(currentUser);

ヒント undefined は処理系が代入する値、null は開発者が代入する値、と覚えると区別しやすいです。

判定方法

値が null か undefined かを判定するには === を使うのが定石です。value === null と value === undefined でそれぞれ厳密に区別できます。両方をまとめて「空っぽ」と扱いたいときは value == null (緩い等価) を使う書き方が定番で、これは null と undefined だけにマッチします。

JavaScript

const a = null;
const b = undefined;
const c = 0;

console.log(a === null);      // true
console.log(b === undefined); // true
console.log(a == null);       // true
console.log(b == null);       // true (どちらも該当)
console.log(c == null);       // false (0 はマッチしない)

関係を図にする

diagram (will load when visible)

注意 typeof null は "object" です。null 判定で typeof を使うとハマるので === を使いましょう。

よくある間違い

1 つ目は null == undefined が true であることを知らずに、== で広く判定してしまうケースです。意図的に「両方を空とみなしたい」ときは value == null が便利ですが、それ以外では === を使うのが安全です。2 つ目は undefined をそのまま代入してしまうケース。const value = undefined; と書くより、本当に空を意図するなら null を選ぶのが慣習です。3 つ目は API のレスポンスで null と undefined が混在している場面です。サーバーから返ってこない項目は undefined、明示的に「無い」と返している項目は null、という設計が多いので、両方を意識して扱いましょう。

Before / After で確認

初心者がやりがちな typeof での null 判定は次のとおりです。typeof null が "object" なので、意図したとおりに判定できません。

JavaScript

// Before 落とし穴
function isMissing(v) {
  if (typeof v === "null") return true; // 永遠に true にならない
  return false;
}

// After === で確実に判定
function isMissing2(v) {
  return v === null || v === undefined;
}

v == null (緩い等価) なら 1 行で null と undefined の両方を判定できますが、初学のうちは === 2 つに分けて書いておくほうが意図がはっきりします。

やってみよう

値を 1 つ受け取り、次のラベルを返す関数 labelOf を作ってください。

null のとき → "null"
undefined のとき → "undefined"
それ以外のとき → "value"

判定の順序が重要です。null と undefined を === で個別にチェックし、最後にデフォルトラベルを返します。

よくある質問

Q. ブラウザと Node.js で動作は変わりますか？

A. JavaScript の構文・組み込み機能（配列・文字列・Promise 等）はどちらでも同じです。違いは DOM API（ブラウザ専用）と fs などのファイル系（Node 専用）など、実行環境固有の機能です。コアロジックは両方で動くため、テストもしやすくなります。

Q. ES6 以降の新機能は使っても大丈夫ですか？

A. 現代のブラウザ・Node.js は ES2020 以降の機能をほぼサポートしています。古い IE 等を対象にする必要が無ければ、let/const、アロー関数、分割代入、async/await を積極的に使ってください。トランスパイル（Babel/Vite）が必要なケースは年々減っています。

Q. TypeScript に進む価値はありますか？

A. 型情報があるとリファクタやエディタ補完が劇的に効くため、規模が大きくなるなら TypeScript への移行を強くおすすめします。最初は any を許容しつつ徐々に型を付ければ、JS の知識をそのまま活かせます。

次のレッスン

次は テンプレートリテラル で、似て非なる null と undefined の違いを判定する関数を書くを学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

null と undefined の要点を自分の言葉で説明できる
このレッスンの最小コード (または操作手順) を見ずに書ける
練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. null と undefined とは何か、1 文で説明してください。

この章のポイント

A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。

関連レッスン

null と undefined を見分ける

null と undefined を見分ける

undefined はいつ現れるか

null はいつ使うか

判定方法

関係を図にする

よくある間違い

Before / After で確認

やってみよう

よくある質問

Q. ブラウザと Node.js で動作は変わりますか？

Q. ES6 以降の新機能は使っても大丈夫ですか？

Q. TypeScript に進む価値はありますか？

次のレッスン

要件

入出力例

ヒント

メモ