Uncaught TypeError: Cannot read property ‘’ of undefinedの原因と対処法

本記事では、JavaScriptのエラーの一つUncaught TypeError: Cannot read property ‘’ of undefinedが出た際の原因と対処法について解説しています。

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで

本書情報

著者	山田 祥寛
発売日	2016/9/30
ページ数	782ページ
Kindle版	○
レビュー (Amazon)	(146件)

ＪａｖａＳｃｒｉｐｔ本格入門 モダンスタイルによる基礎から現場での応用まで 改訂新版/技術評論社/山田祥寛

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報

作成者	CodeMafia
学習時間	19.5時間
受講者数	28,547人
レビュー	(5,025件)

動画の詳細はこちら

エラーの原因と対処法

Cannot read property ‘x’ of undefined、日本語に訳すと「未定義のプロパティ「x」を読み取ることができません」という意味になります。

このエラーは、未定義(undefined)のプロパティに対して処理を実行させた場合に発生します。例えば下記のコードを実行してみましょう。

const infoObj = {
  name: "Taro",
  age:30,
};

console.log(infoObj.hobby); // -> undefined
console.log(infoObj.hobby.length); // -> Uncaught TypeError: Cannot read properties of undefined (reading 'length')

nameObjを定義し、プロパティのfullNameを呼び出すと返り値でundefinedが返却されます。これはnameObjにfullNameというプロパティが存在しないためです。※プロパティを参照するだけであればエラーは発生しません。

このundefinedの値を保持しているプロパティに対して何かしらの処理を実行させると、「Cannot read property ‘x’ of undefined」のエラーが発生します。

意図的にundefinedの値を持たせたプロパティに対して、処理を実行させても同様のエラーが発生します。

const infoObj = {
  name: "Taro",
  age:30,
  hobby: undefined, // ← undefinedを追加
};

console.log(infoObj.hobby.length); // -> Uncaught TypeError: Cannot read properties of undefined (reading 'length')

ここまで来れば皆さんもうお分かりだと思いますが、これをエラーにならないようにするには処理を行いたいプロパティの値をundefined以外のものにします。

const infoObj = {
  name: "Taro",
  age: 30,
  hobby: ["食べ歩き", "映画鑑賞"], 
};

console.log(infoObj.hobby.length);  // -> 2

Uncaught TypeErrorの関連記事

Uncaught TypeError: "" is not a functionの原因と対処法本記事では、JavaScriptのエラーの一つUncaught TypeError: "" is not a functionが出た際の原因と対処法について解説しています。...

Uncaught TypeError: Cannot (read set) property of nullの原因と対処法本記事では、JavaScriptのエラーの一つUncaught TypeError: Cannot (read set) property ‘’ of nullが出た際の原因と対処法について解説しています。...