JS-10: Error handling

了解常見的錯誤消息將幫助您更有效的調試程式碼，四種常見的錯誤消息為

1. SyntaxError，當程式碼的語法不符合 JavaScript 語法規範時，就會拋出 SyntaxError。

常見情況：

• 缺少括號、引號、分號。
• 使用了無效的語法結構。

範例:

// 語法錯誤：少了一個括號
if (true {
  console.log("This will throw a SyntaxError");
}

// 語法錯誤：使用了非法的識別符號
let my-variable = 10; // "-" 是非法的變數名稱字符

2. ReferenceError，當引用了一個不存在的變數或尚未初始化的變數時，就會拋出 ReferenceError。

常見情況：

• 變數未定義。
• 變數的作用域超出範圍。

範例:

// 變數未定義
console.log(x); // ReferenceError: x is not defined

// 使用變數前沒有定義
function test() {
  console.log(myVar); // ReferenceError: myVar is not defined
}

3. TypeError，當對一個數據類型執行了不合法的操作時，就會拋出 TypeError。

常見情況：

• 試圖調用 null 或 undefined 上的方法。
• 非函數類型的對象被當作函數調用。
• 賦值時類型不匹配。
• 對數據類型使用方法，但那個方法不適用於此數據類型。

範例:

// 對 null 調用方法
let obj = null;
obj.toString(); // TypeError: Cannot read properties of null

// 非函數被當作函數調用
let num = 123;
num(); // TypeError: num is not a function

4. RangeError，當一個數值超出有效範圍，或使用了一個無效的陣列長度等情況時，會拋出 RangeError。

常見情況：

• 設定無效的數組長度。
• 遞迴深度超過限制。

// 無效的數組長度
let arr = new Array(-1); // RangeError: Invalid array length

// 遞迴深度過深
function recurse() {
  return recurse();
}
recurse(); // RangeError: Maximum call stack size exceeded

好，對一些常見的錯誤有了基本的了解後，我們要認識 throw 語句，其用於拋出用戶自訂義的異常情況，而處理這些異常能防止你的程式終止或崩潰。

範例:

function validataNumber(input) {
	if(typeof input !== "Number") {
		throw new TypeError("Expected a number, but received " + typeof input);
	}
	return input * 5;
}

• 明確表示這是一個類型錯誤，用來指示數據類型不正確的錯誤。

如果你想拋出一個完全自訂的錯誤消息，你可以使用錯誤構造函數，用來拋出通用的錯誤，不限制特定類型。

範例:

function divide(numerator, denominator) {
	if(denominator === 0) {
		throw new Error("除零錯誤");
	}
	return numerator / denominator;
}

• 將檢查分母是否為0，如果是的話，他會回傳自訂義的錯誤訊息，否則就執行除法動作。
• 當錯誤不屬於 JavaScript 內建的特定錯誤類型（如 TypeError、RangeError）時，使用 Error。

好，現在我要來介紹try-catch-finally，其是 JavaScript 中用來處理錯誤的結構，讓程式在發生異常時能優雅地處理。

結構:

try {
  // 嘗試執行的代碼塊
  // 如果此處的代碼拋出錯誤，會跳到 catch 區塊執行
} catch (error) {
  // 捕捉錯誤並處理
  // error 是自動傳入的參數，包含錯誤訊息和堆疊信息
} finally {
  // 無論是否發生錯誤，這裡的代碼都會執行
  // 通常用來清理資源
}

示範:

try {
	const numerator = Number(window.prompt("請輸入被除數: "));
	const denominator = Number(window.prompt("請輸入除數: "));
	
		if(denominator === 0) {
		throw new Error("不能除零")
	}
	if(isNaN(numerator) || isNaN(denominator)) {
		throw new Error("輸入必須是數字")
	}
	const result = numerator / denominator;
	console.log(result)
}
catch(error) {
	console.log(error);
}
finally {
	console.log("This will always run, no matter what.");
}

window 是瀏覽器中的全域物件（global object），它代表整個瀏覽器視窗。所有的全域函數和變數，默認情況下都屬於這個物件的一部分。可以省略 window，直接調用 prompt()。

呈現效果:

情況 1：用戶嘗試除以零

情況 2：用戶輸入非數字(或輸入空值)

情況 3：用戶輸入有效數字