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

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

ITエンジニア特化の転職サイト！
自社内開発求人に強い【クラウドリンク】

先輩くん

年収、休日数、労働環境等クラウドリンクが審査し、これらを通過した優良求人情報のみ紹介しているよ！

後輩ちゃん

100％自社内開発の求人だから、SESのように職場環境が変わらないのがいいね！

簡単30秒で無料登録！

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

本書情報

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

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

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

エラーの原因と対処法

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が出た際の原因と対処法について解説しています。...