JavaScript

Uncaught TypeError: “” is not a functionの原因と対処法

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

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

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

動画情報
作成者CodeMafia
学習時間19.5時間
受講者数28,547人
レビュー (5,025件)
動画の詳細はこちら

エラーの原因と対処法

“x” is not a function、日本語に訳すと「xは関数ではありません」という意味になります。この「x」には間違えた記述したものが入ります。つまり、関数ではないものに対して関数を呼び出す「()」の記号を使用することでこのエラーは発生します。

下記のサンプルコードをご覧ください。

const str = "HOGE";
console.log(str.length()); // -> Uncaught TypeError: str.length is not a function
const sampleObj = {
  sample1: function () {
    console.log("関数が実行されました。");
  },
};

sampleObj.sample1(); // -> 関数が実行されました。
sampleObj.sample2(); // -> main.js:8 Uncaught TypeError: sampleObj.sample2 is not a function

1つ目のコードは、長さを取得するlengthに()を付けたものです。lengthはプロパティのため、関数を呼び出す()を付けることはありません。ですが、間違えて()を付けた場合lengthプロパティは関数ではありませんとエラーが表示されます。

2つ目のコードは、オブジェクト内に定義された関数を呼び出すのですが、sample2という関数は存在しないのに呼び出そうとしているため、sample2は関数ではありません(存在しない)とエラーが表示されます。

上記のコードでエラーを発生させないようにするためには、プロパティには関数を呼びだす()を付けないことと定義していない関数は呼び出さないようにします。

const str = "HOGE";
console.log(str.length); // -> 4
const sampleObj = {
  sample1: function () {
    console.log("関数が実行されました。");
  },
};

sampleObj.sample1(); // -> 関数が実行されました。
// sampleObj.sample2(); // -> 削除

Uncaught TypeErrorの関連記事

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

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村