ReferenceError: x is not defined の原因と直し方
存在しない変数・関数名を参照したときに出るエラーです。タイプミスだけでなく、let/constのブロックスコープの外から参照した場合にも同じエラーになります。
エラーメッセージの読み方
main.js:2
main.js- ファイル名
2- 行番号 — 実際にクラッシュした行
ReferenceError- 例外クラス — 何が起きたか。ここを検索するのが最短です
totall is not defined- 内容 — 期待していたもの、または受け付けられなかったもの
このエラーが出る典型パターン
パターン1
1 let total = 100; 2 console.log(totall); ^
main.js:2
console.log(totall);
^
ReferenceError: totall is not defined
変数名のスペルミスです。JavaScriptは大文字小文字を区別するため、Totalとtotalも別の名前として扱われます。
直し方: totall を total にします。
広告
広告スロット（未設定）
パターン2
1 function square(n) { 2 return n * n; 3 } 4 console.log(squre (4)); ^
main.js:4
console.log(squre(4));
^
ReferenceError: squre is not defined
関数名のスペルミスです。定義したsquareと1文字でも違うと、別の名前として扱われ見つけられません。
直し方: squre を square にします。
パターン3
1 if (true) { 2 let total = 42; ^ 3 } 4 console.log(total);
main.js:4
console.log(total);
^
ReferenceError: total is not defined
letは波括弧で囲まれたブロックの中だけで通用します。ブロックの外から参照するとReferenceErrorになります。varで宣言すればブロックスコープを持たず、ファイル全体から参照できます。
直し方: let を var にします。
よくある誤解
varで宣言した変数はブロックの外からでも参照できますが、letやconstは波括弧の中でしか通用しません。以前書いたvarの感覚のままブロックの外に出ると、その瞬間にエラーになります。
まとめ
ReferenceError: x is not definedは初級でつまずきやすい項目です。上の3パターンを実際に手で直すと、エラーメッセージのどこを読めばよいかが掴めます。