中級

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          ));
                                    ^

よくある誤解

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

まとめ

typeof null === 'object' の罠は中級でつまずきやすい項目です。上の3パターンを実際に手で直すと、エラーメッセージのどこを読めばよいかが掴めます。

演習をはじめる

関連するエラー

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