TypeError: “x” is not a functionの原因と対処法！JavaScriptエラー

JavaScriptエラー「TypeError: “x” is not a function」が表示され困ったことはないでしょうか。

けど、そんな中で悩むことは、

ですよね。

今回はそんなお悩みを解決する

についてまとめます！

JavaScriptエラー「TypeError: “x” is not a function」の原因

「TypeError: “x” is not a function」というエラーは、JavaScriptで関数以外のものを関数として呼び出そうとしたときに発生するエラーです。これは、変数やオブジェクトなどの関数以外のデータ型を関数として使用した場合によく発生します。

このエラーが発生する原因は、以下のようなものが挙げられます。

①変数やオブジェクトを関数として呼び出そうとしている場合

エラーを再現

エラーを再現してみましょう。以下のコードを入力します。
関数以外のデータ型を関数として呼び出しています。

let x = 5;
x();

結果です。

②関数名を誤っている場合

エラーを再現

エラーを再現してみましょう。以下のコードを入力します。
存在しない関数を呼び出しています。

const x = document.forms.length();

結果です。

lengthはプロパティですが、誤って関数として指定してしまっています。

③クラスのインスタンスを関数として呼び出そうとしている場合

エラーを再現

エラーを再現してみましょう。以下のコードを入力します。
存在しない関数を呼び出しています。

class MyClass {
  myMethod() {
    console.log("こんにちは");
  }
}

const myClassInstance = new MyClass();
myClassInstance();

結果です。

クラスのインスタンスが関数として使用されているため、エラーが発生しています。

JavaScriptエラー「TypeError: “x” is not a function」の対処法

それぞれ関数以外のデータ型、誤った関数名、クラスのインスタンスが関数として使用されているため、エラーが発生していますので、それぞれの型に合った内容を指定するようにしましょう。

①変数やオブジェクトを関数として呼び出そうとしている場合

修正コード

以下修正したコードです。

let x = 5;

存在しない関数x()を外しました。

②関数名を誤っている場合

エラーを再現

以下修正したコードです。

const x = document.forms.length;

lengthはプロパティですので関数を意味する()、を外しています。

③クラスのインスタンスを関数として呼び出そうとしている場合

エラーを再現

以下修正したコードです。

class MyClass {
  myMethod() {
    console.log("こんにちは");
  }
}

const myClassInstance = new MyClass();
myClassInstance.myMethod(); 

結果です。

クラスのインスタンスは、クラス内に定義されたメソッドを呼び出す必要があります。そのため、myClassInstance() のように、クラスのインスタンス自体を関数として呼び出すことはできません。その代わりに、myClassInstance.myMethod() のように、メソッド名を指定して呼び出す必要があります。

さいごに

いかがでしょうか。

今回は、

についてまとめました。

また、他にも便利な方法がありますので、よろしければご参照頂ければと思います。