中級

typeof null === 'object' の罠

typeof演算子はnullに対して"object"を返します。これは言語仕様初期からのバグ扱いの挙動で、修正すると既存コードが壊れるため現在も残っています。オブジェクトかどうかの判定にtypeofだけを使うとnullをすり抜けさせてしまいます。

エラーメッセージの読み方

main.js:3

main.js

ファイル名

3

行番号 — 実際にクラッシュした行

TypeError

例外クラス — 何が起きたか。ここを検索するのが最短です

Cannot read properties of null (reading 'label')

内容 — 期待していたもの、または受け付けられなかったもの

このエラーが出る典型パターン

 1  function describe(value) {
 2    if (typeof value === "object") {
 3      return value.label;
 4    }
 5    return "primitive";
 6  }
 7  console.log(describe(null            ));
                                 ^

 1  function area(shape) {
 2    if (typeof shape === "object") {
 3      return shape.width * shape.height;
 4    }
 5    return 0;
 6  }
 7  console.log(area(null                   ));
                                ^

 1  function describeUser(user) {
 2    if (typeof user === "object") {
 3      return user.name.toUpperCase();
 4    }
 5    return "unknown";
 6  }
 7  console.log(describeUser(null          ));
                                    ^

 1  function summarize(item) {
 2    if (typeof item === "object") {
 3      return item.title.length;
 4    }
 5    return -1;
 6  }
 7  console.log(summarize(null            ));
                                  ^

 1  function price(product) {
 2    if (typeof product === "object") {
 3      return product.cost * 1.1;
 4    }
 5    return 0;
 6  }
 7  console.log(price(null         ));
                            ^

よくある誤解

「typeofで'object'と判定できればプロパティを読んでも安全」ではありません。nullも同じ判定を通過するため、その後のプロパティアクセスでエラーになります。

実務での勘所

この挙動は1995年の初期実装に由来する有名なバグです。当時のJavaScriptエンジンは値の型をビットの組み合わせ(型タグ)で表現しており、オブジェクトの型タグはたまたま000、nullは全ビットが0のヌルポインタとして表現されていました。typeofはこの型タグを見て判定するため、nullも「タグが000だからオブジェクト」と誤判定してしまったのです。TC39(JavaScript仕様の標準化団体)はこれを修正する提案を一度検討しましたが、すでに世界中のコードがこの挙動に依存しているため「ウェブを壊さない」という原則のもと修正を見送り、今も仕様上の既知の欠陥として残っています。

演習をはじめる

関連するエラー

• undefinedのプロパティ読み取りエラーの原因undefinedになった値のプロパティやメソッドにアクセスしようとしたときに出る、JavaScript学習者が最も多く遭遇するエラーです。
• 同じ内容のオブジェクト同士が === でfalseになる理由オブジェクトや配列の==・===は中身ではなく参照（メモリ上の同一性）を比較します。