Uncaught TypeError: Cannot read property ‘foo’ of undefinedの解決法【JavaScript】
JavaScriptで記事タイトルのようなエラーに遭遇したことはないでしょうか。この記事では、このエラーの意味と解決法について説明します。
fooという関数名を例として使用していますが、この名前は実装によって異なるのでご自身のエラー内容で置き換えて読んでください。
エラーの原因
このエラーメッセージは「undefinedから’foo’は呼べません」といった意味になっています。undefined
はJavaScriptの変数等が初期化されていない場合などに使用される値です。普通に使っている限りではundefined
が関数を持つことはないので、「未定義の値からfooという関数を呼ぼうとしているけど、そんなものないですよ」と言われています。
よくある間違いは’foo’という関数がundefined
であるというエラーだと思ってしまうことです。しかし、実際にはfooを呼ぼうとしているオブジェクトの方がundefinedになってることが原因です。
例えば、以下のような例はobj
がundefined
なので上記のエラーが発生します。
let obj; // 何も代入していないのでobjはundefined
obj.foo(); // Uncaught TypeError
解決方法
呼び出し側のオブジェクトが存在することをチェックすることで解決することができます。例えば、以下のようにif文で判定を行うと良いと思います。undefined
だった場合の処理も適切に行うように注意しましょう。
if (typeof obj !== "undefined") {
obj.foo();
} else {
// objがundefinedだった場合の処理
}
この記事では、JavaScriptのUncaught TypeErrorについて説明しました。
呼ばれる側の関数名のほうが強調されているように見えるメッセージなので混乱してしまいがちですが、よく起こりうるエラーなので覚えておくと良いと思います。
Ermi
termina.ioの記事全般を書いています。東京大学 大学院 情理でコンピュータサイエンスを学びました。プログラミング言語など計算機科学全般に興味があります。キーボードやイヤホンなど、身の回りのものに強い拘りを持つ傾向があります。そして、沼にハマって帰らぬ人へと...。
最近の記事
Ermi
termina.ioの記事全般を書いています。東京大学 大学院 情理でコンピュータサイエンスを学びました。プログラミング言語など計算機科学全般に興味があります。キーボードやイヤホンなど、身の回りのものに強い拘りを持つ傾向があります。そして、沼にハマって帰らぬ人へと...。