前言

在六角學院的「 JavaScript 核心篇 」中常遇到開發者工具顯示 Uncaught SyntaxError 與 Uncaught ReferenceError 錯誤訊息，藉此篇文章整理開發中常遇到的錯誤訊息們，方便日後除錯翻閱。

❐ JavaScript 常見的錯誤類型 ( Error Reference )

• SyntaxError
• ReferenceError
• TypeError
• RangeError
• URIError

❐ SyntaxError 語法錯誤

SyntaxError 通常為語法結構的錯誤，此錯誤結構有時候也可以透過 VSCdoe 的提示來查看，結構有問題的地方 VSCode 會顯示紅色毛毛蟲樣式。

範例 1. 函式缺少結尾 }

function callName() {
  console.log('Hello, 媽');

callName() 結尾少了 }，開發者工具會跳出 Uncaught SyntaxError 錯誤訊息。

範例 2. 結尾符號不正確

let myName = 'Carrie',

正確寫法應為 let myName = 'Carrie'; 而非逗號，開發者工具會跳出 Uncaught SyntaxError 錯誤訊息。

❐ ReferenceError 參考、引用錯誤

ReferenceError 錯誤類型較常在執行階段才會看到錯誤，編輯器中不一定會顯示錯誤，除非裝 ESLint 工具，可透過下面方式進行除錯。

除錯重點

• 可透過 Chrome 開發者工具的錯誤訊息排錯。
• 於 JS 撰寫的開發環境中 ( 例如 VSCode ) 裝 ESLint 工具。

範例1.

console.log(Ming);
let Ming = '小明';

因為 let 宣告變數，變數在創造階段會位於暫時性死區，而 console.log(Ming); 在 Ming = '小明'; 之前，自然讀取不到 Ming 的值，會顯示 Uncaught ReferenceError: Cannot access 'Ming' before initialization 錯誤訊息。

範例 2. 呼叫為宣告的變數

console.log(Ming);

會顯示錯誤訊息 Uncaught ReferenceError: Ming is not defined。

❐ TypeError 型別錯誤

TypeError 錯誤訊息不會顯示於編輯器中，也是須於執行環境中才會看到錯誤訊息。

除錯重點：

• 可透過 Chrome 開發者工具的錯誤訊息排錯。
• 在要取變數、重新賦予變數新值，先確認此變數的資料型別與結構。
  • const 不能重新賦予值。
  • undefined  與 null  無法再增加屬性。

範例 1. const 重新賦予值

const Ming = '小明';
Ming = '大明';

由於 const 不能重新賦予值，所以會顯示錯誤訊息 Uncaught TypeError: Assignment to constant variable 。

範例 2. undefined  與 null 新增屬性

null.name = 'Hi';
undefined.callMe = 'Hello';

由於 undefined  與 null  無法再增加屬性，所以分別會顯示錯誤訊息：

• Uncaught TypeError: Cannot set properties of null (setting 'name')
• Uncaught TypeError: Cannot set properties of undefined (setting 'callMe')

範例 3. 對 undefined 的值新增屬性

var family = {
  dog: 2,
}
family.father.child = 3;

錯誤訊息：Uncaught TypeError: Cannot set properties of undefined (setting 'child')

• 因為 father 並沒有定義 ( 不存在 )，所以它的值為 undefined ，在 undefined 上是無法新增任何屬性。

❐ RangeError 範圍錯誤

RangeError 錯誤訊息的原因為

• 無效的陣列長度
• 過度執行函式，會產生過多執行堆疊
  • 需檢視程式碼的邏輯找出問題點，否則會過去消耗硬體資源。

範例 1. 無效的陣列長度

let ary = ['A'];
ary.length = ary.length - 2;

錯誤訊息 Uncaught RangeError: Invalid array length

範例 2. 函式自己呼叫自己

(function fn(){
  fn();
})();

執行堆疊超過環境限制，錯誤訊息 Uncaught RangeError: Maximum call stack size exceeded

❐ URIError Url 錯誤

Url 解析不成功的原因為：傳遞給 decodeURI、encodeURL、encodeURIComponent、decodeURIComponent 這些函數的參數不合格，導致函數無法正確對它進行解析。

範例1. decodeURL

// 錯誤: Uncaught URIError: URI malformed at decodeURI
decodeURI('%carrie');

// 正確
decodeURI('%25carrie');

參考資訊

• JavaScript 錯誤類型 ( JavaScript Error Reference )
• JavaScript 開發中常見錯誤解決辦法
• MDN - URIError: malformed URI sequence