在 JavaScript 開發過程中，當按下 F12 切換至主控台時，常常會遇到 "is not defined" 和 "undefined" 這兩種錯誤。這兩種錯誤分別是如何產生的？我們該如何預防和避免呢？之前我對此似懂非懂，終於可以藉此機會跟著老師來深入了解與學習。

is not defined

這個錯誤是因為變數尚未被宣告，而在後續使用該變數時，執行階段會拋出這個錯誤。

undefined

這個錯誤是因為變數已被宣告，但尚未被賦值，或者在物件中訪問不存在的屬性時會出現。

預防 undefined 錯誤的示範：使用JS語法技巧 可選鏈

以下是一個使用 JSONPlaceholder API 的範例，展示如何使用可選鏈來預防資料取值時的 undefined 錯誤。

fetch('https://jsonplaceholder.typicode.com/users/1')
  .then(response => response.json())
  .then(data => {
    // 使用可選鏈安全存取嵌套屬性
    const userName = data?.name;
    const userEmail = data?.email;
    const userCity = data?.address?.city;

    // 檢查值是否存在
    console.log('User Name:', userName || 'Name not available');
    console.log('User Email:', userEmail || 'Email not available');
    console.log('User City:', userCity || 'City not available');
  })
  .catch(error => {
    console.error('Error fetching user data:', error);
  });

也可以在以下片段程式碼中，透過加入 "||" 來設定預設值，這樣即使返回的結果為 undefined，也能提供一個預設值，避免炸前端。

const userName = data.name || "";