JavaScriptのTypeError（型エラー）とは？主な発生原因と対処法をわかりやすく解説

JavaScriptにおけるTypeError（型エラー）は、実行できない操作を行った結果として発生するエラーオブジェクトです。多くの場合、操作に含まれる値が期待される型と異なることが原因となります。

JavaScriptの9つのデータ型・構造型

そもそも「型」とは何でしょうか。最新版のJavaScript仕様であるECMAScriptでは、9つのデータ型および構造型が定義されています。このうち、string、number、bigint、boolean、undefined、symbolの6つ（nullを含めれば7つ）がプリミティブ型です。なぜ操作中にTypeErrorが発生するのかを理解するために、まずJavaScriptの9つの型をおさらいしておきましょう。型の分類に迷ったときは、typeof演算子を使えば簡単に確認できます。

1. undefined：宣言されたばかりの変数に自動的に割り当てられる値の型です。変数への値の定義や代入を忘れると、「value of undefined」のTypeErrorが発生しやすくなります。
2. Boolean：trueまたはfalseのみを値として持つ論理データ型です。
3. Number：数値を表すデータ型です。
4. String：バッククォート、シングルクォート、ダブルクォートで囲まれた文字の並び（文字列）です。
5. BigInt：他のプログラミング言語で「bignum」と呼ばれることもある数値データ型です。
6. Symbol：Symbol関数を呼び出して生成される、一意の識別子を表す値です。
7. Object：構造型の一つで、配列、オブジェクト、Map、Setなど、「new」キーワードで生成できるほぼすべてのものを指します。
8. Function：他のコードから呼び出し可能なコード断片であり、データ構造には属さない型です。
9. null：通常、存在しないオブジェクトやアドレスを意図的に表すために使われる値です。

よくあるJavaScriptのTypeErrorとその修正方法

TypeErrorは、変更できない値を変更しようとしたときや、値を不適切な方法で使用したときにスローされます。また、関数や関数内の演算子が期待する型と互換性のない引数を渡した場合にも発生します。ここからは、代表的な3つのパターンとその解決策を見ていきましょう。

ケース1：変更できない値を変更しようとした場合

constキーワードを使って値を代入すると、それは定数となり、後から変更することはできません。定数の値を変更しようとすると、TypeErrorが発生します。

const a = 5
a = "5"
// Uncaught TypeError: Assignment to constant variable.

これを修正するには、文字列「5」を格納したい場合に、別の識別子名を使って新しい定数として宣言します。

const a = 5
const b = "5"

ケース2：値を不適切な方法で使用した場合

開発者は、値が意図した通りに使われているかどうかも確認する必要があります。以下の例では、garfieldがCat()関数のインスタンスかどうかを検証する際に、「Cat」と「garfield」の順序が逆になっています。

function Cat() {}
function Dog() {}

let garfield = new Cat()

Cat instanceof garfield

// Uncaught TypeError: Right-hand side of 'instanceof' is not callable

両者の順序を正しく入れ替えれば、このエラーは解消されます。

function Cat() {}
function Dog() {}

let garfield = new Cat()

garfield instanceof Cat

ケース3：関数が期待する型と互換性のない引数を渡した場合

処理を実装する際、開発者は望む結果が得られるように値を適切に扱わなければなりません。nullは「オブジェクトが存在しないこと」を示すために意図的に使える便利な値ですが、以下のように関数が期待する型と互換性のない引数として渡すと、TypeErrorが発生します。

function readingErrorsAreImportant(a){
    if(a.length === 5){
      return "equals five"
    } else if(a.length > 5) {
      return "Greater than five"
    } else {
      return "Less than five"
    }
}
console.log(readingErrorsAreImportant(null))

// Uncaught TypeError: Cannot read property 'length' of null

修正するには、関数が期待する値の型を渡します。ここでは数値型を渡してみましょう。

function readingErrorsAreImportant(a){
    if(a.length === 5){
      return "equals five"
    } else if(a.length > 5) {
      return "Greater than five"
    } else {
      return "Less than five"
    }
}
console.log(readingErrorsAreImportant(10))

まとめ

コードがTypeErrorをスローしている理由を正しく理解することは、効率的なデバッグの第一歩です。型の分類に迷ったときは、typeof演算子を使えば9つのデータ型・構造型のいずれかが返されるため、その結果をもとにデバッグをどのように進めるべきかを判断できます。エラーメッセージを丁寧に読み解く習慣をつければ、TypeErrorへの対処はぐっと容易になるでしょう。