TypeError: x is not a function の原因と直し方
関数ではない値を関数として呼び出そうとしたときに出るエラーです。変数名やメソッド名のタイプミス、あるいはプロパティと勘違いした呼び出しで頻発します。
エラーメッセージの読み方
main.js:3
main.js- ファイル名
3- 行番号 — 実際にクラッシュした行
TypeError- 例外クラス — 何が起きたか。ここを検索するのが最短です
total is not a function- 内容 — 期待していたもの、または受け付けられなかったもの
このエラーが出る典型パターン
パターン1
1 const total = 5; 2 function getTotal() { return total; } 3 console.log(total ()); ^
main.js:3
console.log(total());
^
TypeError: total is not a function
totalは数値であって関数ではありません。呼び出した結果を得たい場合は、値を返す関数（ここではgetTotal）を呼びます。
直し方: total を getTotal にします。
広告
広告スロット（未設定）
パターン2
1 const cart = { items: [] }; 2 cart.addItm ("apple"); ^ 3 console.log(cart.items.length);
main.js:2
cart.addItm("apple");
^
TypeError: cart.addItm is not a function
cartにはaddItmという名前のメソッドは存在しません。配列に追加したい場合はcart.items.pushを呼びます。
直し方: addItm を items.push にします。
パターン3
1 const config = { name: "app", describe() { return this.name; } }; 2 console.log(config.getName ()); ^
main.js:2
console.log(config.getName());
^
TypeError: config.getName is not a function
configにgetNameというメソッドは定義されていません。実際に定義されているdescribeを呼び出す必要があります。
直し方: getName を describe にします。
よくある誤解
ReferenceErrorと混同されがちですが別物です。変数やプロパティ自体は存在するのに、その中身が関数ではないときにTypeErrorになります。存在しない名前を参照したReferenceErrorとは原因が違います。
まとめ
TypeError: x is not a functionは初級でつまずきやすい項目です。上の3パターンを実際に手で直すと、エラーメッセージのどこを読めばよいかが掴めます。