初級

undefinedのプロパティ読み取りエラーの原因

undefinedになった値のプロパティやメソッドにアクセスしようとしたときに出る、JavaScript学習者が最も多く遭遇するエラーです。値が本当にundefinedになる典型的な場面を整理します。

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

main.js:2

main.js

ファイル名

2

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

TypeError

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

Cannot read properties of undefined (reading 'length')

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

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

 1  let s = undefined;
                ^
 2  console.log(s.length);

 1  let user = undefined     ;
                      ^
 2  console.log(user.name);

 1  function getConfig() {
 2                          
                 ^
 3  }
 4  const config = getConfig();
 5  console.log(config.port);

 1  let profile;
 2  function loadProfile() {
 3                                
                    ^
 4  }
 5  profile = loadProfile();
 6  console.log(profile.email);

 1  const users = [{ name: "Al" }];
 2  console.log(users[1 ].name);
                       ^

よくある誤解

「変数を宣言したから何か値が入っている」とは限りません。宣言だけでは中身はundefinedのままで、関数が値を返し忘れたり、プロパティが存在しなかったりすると、そのままundefinedが伝播します。

実務での勘所

JavaScriptには「値が無い」を表す状態がundefinedとnullの2種類あり、混同されがちですが役割が違います。undefinedは、変数を宣言しただけで代入していない、関数がreturnを書かずに終わった、オブジェクトに存在しないプロパティを読んだ、といった「言語やエンジンが自動的に補う空の値」です。nullは逆に、開発者が「意図的に何も無い」と示すために自分で代入する値です。このエラーがnullではなくundefinedを名指ししているのは、ほとんどの場合が意図的な代入ではなく、値を返し忘れた・存在しないプロパティを読んだといった見落としから来ているためです。

演習をはじめる

関連するエラー

• ReferenceError: x is not defined の原因と直し方存在しない変数・関数名を参照したときに出るエラーです。
• 配列の範囲外アクセスがエラーにならずundefinedになるJavaScriptの配列は範囲外の添字にアクセスしてもエラーを投げません。
• typeof null === 'object' の罠typeof演算子はnullに対して"object"を返します。

他の言語ではどうなるか

• null・undefined・None：「ない」を表す値の扱いは言語ごとに何が違うのか