什麼是 undefined？快速認識 JavaScript 的未定義型別
在 JavaScript 的世界裡，undefined 是一個相當基礎卻又極為重要的原始型別。當開發者宣告一個變數，卻還沒有給它任何具體數值時，JavaScript 引擎會在記憶體配置的階段，自動幫這個變數塞進一個預設值，也就是 undefined。
這表示變數本身已經存在於目前的作用域中，只是它的內容還沒被定義。和其他程式語言常要求變數宣告時就要初始化不同，JavaScript 選擇給予這種「已存在但尚未有值」的彈性狀態，讓程式可以繼續執行而不中斷。理解 undefined 的運作方式，正是掌握 JavaScript 記憶體管理與變數生命週期的第一步。
undefined vs null 大解密：一張表看懂本質差異
許多開發者容易把 undefined 和 null 搞混，但從語意上來看，兩者其實有著根本差異。undefined 通常代表系統層面的「尚未定義」，也就是程式還沒為變數設定值；而 null 則是開發者主動指派的一種「空值」，用來明確告訴系統「這裡刻意不放任何東西」。
在實際執行時，兩者的檢測結果也不同。使用 typeof 運算子時，typeof undefined 會正確回傳字串 “undefined”，但 typeof null 因為早期 JavaScript 底層的歷史問題，卻會回傳 “object”。因此在比較兩個值時，建議使用嚴格相等 ===，避免寬鬆相等 == 因為型別轉換而產生意外的判斷結果。
| 特性 | undefined | null |
|---|---|---|
| 語意含義 | 系統預設的「未賦值」狀態 | 人為指定的「空值」狀態 |
| typeof 結果 | “undefined” | “object” |
| 相等性測試 (==) | undefined == null 為 true | null == undefined 為 true |
| 相等性測試 (===) | undefined === null 為 false | null === undefined 為 false |
為什麼會出現 undefined？5 大高頻情境與程式碼解析
在日常開發中，undefined 的出現往往反映出程式邏輯上的小瑕疵。以下五種情境最常見：
- 變數宣告未賦值：使用 let 或 var 宣告變數卻沒有給初始值，該變數就會預設為 undefined。
- 存取不存在的物件屬性：當你試圖從物件中讀取一個不存在的鍵值時，JavaScript 不會直接報錯，而是回傳 undefined。
- 函式缺乏回傳值：如果函式執行完畢卻沒有 return 任何東西，呼叫該函式就會得到 undefined。
- 函式參數未傳遞：呼叫函式時如果少傳了參數，函式內部就會把這個參數視為 undefined。
- 陣列索引溢位：嘗試存取陣列中不存在的索引位置，同樣會得到 undefined。
深入底層：Hoisting（變數提升）與 Temporal Dead Zone 對 undefined 的影響
JavaScript 的執行環境深受 Hoisting（變數提升） 機制影響。當使用 var 宣告變數時，該變數會被提升到作用域最上方，並預設初始化為 undefined，因此在宣告之前存取它不會導致程式崩潰，只會得到 undefined。這種行為雖然方便，卻也容易製造難以追蹤的 Bug。
相較之下，let 與 const 雖然同樣會被提升，但它們會進入 Temporal Dead Zone（暫時死區），在宣告前存取就會直接拋出 ReferenceError。這種嚴格設計正是現代開發規範強烈建議避免使用 var 的主要原因。釐清 undefined 與 not defined 的差異非常重要，前者是變數存在但缺少值，後者則是記憶體中根本找不到該名稱。
徹底告別報錯！現代前端處理 undefined 的 4 大終極技巧
為了避免 TypeError: Cannot read properties of undefined 這類常見錯誤，現代前端開發者可以善用 ES2020 以後的語法特性：
- 可選鏈運算子（Optional Chaining ?.）：存取多層巢狀物件時，若中間任一層為 undefined，它會直接回傳 undefined 而非拋出錯誤，例如 user?.profile?.address。
- 空值合併運算子（Nullish Coalescing ??）：這能解決 || 運算子誤把 0 或 “” 視為假值的問題，只有在值為 undefined 或 null 時才套用預設值。
- 函式參數預設值：透過 function greet(name = ‘Guest’) {} 的寫法，可有效防止參數缺失造成的空值傳播。
- 物件解構賦值搭配預設值：利用 const { id = 0 } = props 的方式，確保資料結構在缺失時仍保有穩定的初始狀態。
API 串接陷阱：當 JSON 遇上 undefined 會發生什麼事？
在處理後端 API 資料時，undefined 的行為會變得更加特殊。當使用 JSON.stringify() 將物件轉成 JSON 字串時，值為 undefined 的屬性會被直接移除；但如果 undefined 出現在陣列中，則會被轉成 null。這種不一致的處理方式，常常導致前端與後端資料格式對不上。
為了確保資料流穩定，建議在串接 API 時引入如 Zod 或 Yup 這類綱要驗證工具。在資料進入應用程式的前端邊界就進行驗證與清洗，能大幅降低因後端遺失鍵值而產生的 undefined 風險，這對處理金融表單或複雜電商購物車架構尤其重要。
Q1：JavaScript 中 undefined 和 null 最核心的差別到底是什麼？
undefined 代表變數已宣告但「尚未被賦值」，是系統自動給予的預設狀態。而 null 則是開發者刻意賦予的值，代表「此處沒有任何物件或數值」。在型別檢測上，typeof undefined 為 “undefined”，而 typeof null 因歷史遺留問題顯示為 “object”。
Q2：為什麼在瀏覽器 console 會常看到 Uncaught TypeError: Cannot read properties of undefined？
這代表程式試圖從一個當前為 undefined 的變數中讀取屬性或呼叫方法（例如呼叫 user.name 但 user 未被定義）。最推薦的現代解法是使用可選鏈運算子 user?.name，它能安全地在路徑中斷時回傳 undefined 而不拋出錯誤。
Q3：undefined 和 not defined 是一樣的意思嗎？
這兩者完全不同。undefined 是合法的型別與數值，表示變數存在但未賦值。而 not defined（即 ReferenceError）代表該變數名稱在目前的執行環境中根本未經宣告，導致 JavaScript 引擎無法在記憶體中找到對應的參考。
Q4：在判斷變數是否為 undefined 時，應該用 == 還是 ===？
強烈建議使用嚴格相等 ===。若使用 x == null，它會同時匹配 undefined 與 null，這在某些情境下雖方便但缺乏精確性。唯有使用 x === undefined 才能確保型別與數值完全一致。
Q5：為什麼使用 JSON.stringify() 時，物件裡的 undefined 會直接消失？
依據 JSON 標準規範，JSON 格式並不支援 undefined 型別。因此在轉換過程中，物件中值為 undefined 的鍵值會被自動移除，而陣列中的 undefined 則會被強制轉換為 null，以符合 JSON 的資料結構要求。
