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について説明しました。
呼ばれる側の関数名のほうが強調されているように見えるメッセージなので混乱してしまいがちですが、よく起こりうるエラーなので覚えておくと良いと思います。
