【JavaScript】 TypeError: OOOO is not a function に潜む罠

皆さんこんにちは！
プログラミング初心者さんがつまずきやすいポイントを丁寧に解説、解消していく「初心者つまずき解消ブログ」です。

今日もエラーで詰まっていませんか？
ひとつエラーが解消してもまた次のエラー、それを解消してもまた次のエラー。もう心が折れそうですですよね・・・。

今回は、JavaScript初心者がつまづきやすいエラーであるTypeError: OOOO is not a functionについて解説していきます。

ところで、皆さんはエラーが出た時まずはどんな行動を起こしますか？

多くの人はそのエラーの意味を調べると思います。
そして画像のようなエラーが出たときは、まずその意味を調べてからエラーの原因究明に取り掛かると思います。

TypeError: OOOO is not a functionの意味を調べると、関数でないものを関数呼び出ししようとした際に発生するエラーだということがわかります。

翻訳すると「OOOOは関数ではありません。」という意味ですよね。
先に挙げた画像の例で言うと「sample.charAtは関数ではありません。」という意味になります。

このエラーの原因で多いのがタイプミスによるエラーです。
例えば、document.getElementByIdと書くべきものを、document.getElementByIDと書いてしまった時にnot a functionのエラーが出たりします。

ただ、以下のようなコードを書いていたとしたら、原因が違ってきます。

var sample = 12345;

console.log(sample.charAt(0));//charAt()関数は文字列から指定された位置にあるコードの値を取りだす関数です。

この場合、スペルミスもしていませんし、charAt()関数もsample変数も存在します。けれど、エラーにはTypeError: sample.charAt is not a functionが表示されます。

これっておかしいですよね。

実は、TypeError: OOOO is not a functionエラーは関数でないものを、関数呼び出ししようとした際以外にも発生する場合があるんです。

それは、間違ったオブジェクトに対する関数呼び出しが行われた際です。
まだしっくりこないと思うので、例を上げて解説していきます。

ここで、先ほどのコードをご覧ください。
※注意　charAt()関数は文字列から指定された位置にあるコードの値を取りだす関数です。

var sample = 12345;

console.log(sample.charAt(0));

このコードには１つ間違いがあります。
それは「数値」に対してcharAt()関数を使用しているところです。

charAt()関数は「文字列」に対して使わなければいけないというルールがありますが、対象のsample変数には数値である「12345」が入っています。
そのため、間違ったオブジェクトに対する関数呼び出しが行われたことになり、 is not a functionエラーがコンソールに表示されたということです。

文字列に対してcharAt()関数を使うことで、このエラーは解消されます。

var sample = “12345”;

console.log(sample.charAt(0));

このように１つのエラーに複数の意味を含んでいたり、翻訳結果とは別の意味を含んでいたりすることがあります。

これからはエラーの原因究明に詰まったときはエラーを翻訳するだけでなく、そのエラーがどんな意味を持っているのかよく調べてから原因を究明していくようにしましょう！