undefinedのプロパティ読み取りエラーの原因
undefinedになった値のプロパティやメソッドにアクセスしようとしたときに出る、JavaScript学習者が最も多く遭遇するエラーです。値が本当にundefinedになる典型的な場面を整理します。
エラーメッセージの読み方
main.js:2
main.js- ファイル名
2- 行番号 — 実際にクラッシュした行
TypeError- 例外クラス — 何が起きたか。ここを検索するのが最短です
Cannot read properties of undefined (reading 'length')- 内容 — 期待していたもの、または受け付けられなかったもの
このエラーが出る典型パターン
パターン1
1 let s = undefined; ^ 2 console.log(s.length);
main.js:2
console.log(s.length);
^
TypeError: Cannot read properties of undefined (reading 'length')
sがundefinedのままlengthにアクセスしています。undefinedは「値が存在しない」ことを表すため、プロパティを持ちません。
直し方: undefined を "hi" にします。
広告
広告スロット（未設定）
パターン2
1 let user = undefined ; ^ 2 console.log(user.name);
main.js:2
console.log(user.name);
^
TypeError: Cannot read properties of undefined (reading 'name')
userがundefinedのままnameを読もうとしています。オブジェクトを代入し忘れると、後続のプロパティアクセスで必ずここに行き着きます。
直し方: undefined を { name: "Al" } にします。
パターン3
1 function getConfig() { 2 ^ 3 } 4 const config = getConfig(); 5 console.log(config.port);
main.js:5
console.log(config.port);
^
TypeError: Cannot read properties of undefined (reading 'port')
return文がない関数は暗黙にundefinedを返します。呼び出し側は戻り値を確認せずプロパティへアクセスするとここで止まります。
直し方: （空） を return { port: 8080 }; にします。
よくある誤解
「変数を宣言したから何か値が入っている」とは限りません。宣言だけでは中身はundefinedのままで、関数が値を返し忘れたり、プロパティが存在しなかったりすると、そのままundefinedが伝播します。
まとめ
undefinedのプロパティ読み取りエラーの原因は初級でつまずきやすい項目です。上の3パターンを実際に手で直すと、エラーメッセージのどこを読めばよいかが掴めます。
関連するエラー
- ReferenceError: x is not defined の原因と直し方存在しない変数・関数名を参照したときに出るエラーです。
- 配列の範囲外アクセスがエラーにならずundefinedになるJavaScriptの配列は範囲外の添字にアクセスしてもエラーを投げません。
- typeof null === 'object' の罠typeof演算子はnullに対して"object"を返します。