TypeError・ReferenceError・SyntaxError の違い

まず結論

エラー名は、最初に確認する場所を絞るための手がかりです。 SyntaxError はコードを読み取る段階、ReferenceError は名前を探す段階、TypeError は値を使う段階で起きます。

SyntaxErrorはコードを読む段階、ReferenceErrorは名前を探す段階、TypeErrorは値を使う段階で確認する比較図

閉じ括弧やカンマの不足など、JavaScriptとして読めないコードがあると起きます。該当するスクリプトは実行されません。

const total = (price * count;

まずエラーが示す行と、その直前の行を見ます。JSON.parse() が投げる SyntaxError は、ソースコードではなく受け取ったJSON文字列が対象です。

宣言していない名前や、現在のスコープから見えない変数を読むと起きます。

{
  const userName = "Ada";
}

console.log(userName);
// ReferenceError: userName is not defined

変数名の打ち間違い、ブロックや関数の内側で宣言した変数を外側から読んでいないか、letやconstを初期化前に参照していないかを確認します。

null や undefined のプロパティを読んだり、文字列ではない値に文字列用メソッドを呼んだりすると起きます。

const profile = null;
console.log(profile.name);
// TypeError: Cannot read properties of null

エラー行の直前で値と型を確認します。

console.log(profile, typeof profile);

optional chaining（profile?.name）は表示を止めないための選択肢ですが、値が null になった理由を調べずに使うと問題を隠します。

SyntaxError は文法、ReferenceError は名前、TypeError は値の扱いを確認します。エラー名だけで直そうとせず、停止した行で何を参照し、どんな値を使ったかを確かめると原因を切り分けやすくなります。