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

2022年5月31日2023年7月17日

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

JavaScriptの学習におすすめ書籍

1冊ですべて身につくJavaScript入門講座

総合評価

( 5 )

メリット

誰でも分かるように嚙み砕いて説明してくれる
アニメーションの知識が深く学べる
1つのWebサイトを作りながら学べる

1冊ですべて身につくJavaScript入門講座 [ Mana ]

楽天ブックス

¥2,794 （2024/11/17 15:15時点 | 楽天市場調べ）

Amazonで探す

楽天市場で探す

Yahoo!ショッピングで探す

ポチップ

先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！

Amazon Kindle Unlimited

全プログラマー必見！
変数名/関数名にもう悩まない！

リーダブルコード

総合評価

( 5 )

メリット

美しいコードが書けるが自然と書けるようになる
他の開発者が理解しやすいコードになる

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤功平, 翻訳:角征典

¥2,640 （2023/07/23 02:48時点 | Amazon調べ）

Amazonで探す

楽天市場で探す

Yahoo!ショッピングで探す

ポチップ

エラーの原因と対処法

“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: “” is not a functionの原因と対処法

エラーの原因と対処法

Uncaught TypeErrorの関連記事