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

JavaScript





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

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

・JavaScriptエラー「TypeError: “x” is not a function」の原因と対処法がわからない

ですよね。

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

・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();

結果です。

Uncaught TypeError: x is not a function

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

エラーを再現

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

const x = document.forms.length();

結果です。

Uncaught TypeError: document.forms.length is not a function"

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

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

エラーを再現

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

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

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

結果です。

Uncaught TypeError: myClassInstance is not a function

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

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() のように、メソッド名を指定して呼び出す必要があります。

さいごに

いかがでしょうか。

今回は、

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

についてまとめました。

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



この記事の関連キーワード

こちらの記事の関連キーワード一覧です。クリックするとキーワードに関連する記事一覧が閲覧できます。