JS null vs undefined

此篇探討在 JS 中 null、undefined 的差異。

定義

null：表示變數 沒有值（空值）。
undefined：預設值，表示變數 尚未宣告 或者是已經宣告了但 尚未賦值。

1 2	let def; // undefined let text = null; // null

常見應用

let obj = { 
  name: 'kent',
}
console.log(obj.age); //undefined

let num = 0;
num = 100;

// init
let num = null;

發覺和其他語言不同在 JS 中，大多是人不會將值設定為 null，而是依照不同型別來設置 init，我猜測和 JS 擁有非常多可惡的自動轉型規則有關係。

1
2
3

let obj = {};
let num = 0;
let str = '';

JS 中某些特定情況時會回傳 null。（下方介紹兩個在 JS 中會出現 null 的情境）

情境一：閉包 closure、作用域鏈 scope chain

情境二：獲取 DOM 元素時

console.log(Boolean(undefined));  // false
console.log(Boolean(null));       // false

console.log(undefined == null);   // true，因為都是 false

想暸解 undefined == null 為什麼是 true，可以參考這篇文章（裡面有提到是因為 == 的規則導致）

下方透過四個方向來演示兩者結果差異。

Number

null：Number(null) 結果為 0
undefined：Number(undefined) 結果為 NaN。

NaN：代表不是數值（not a number）

typeof

null：typeof undefined 結果為 undefined。
undefined：typeof null 結果為 Object。

JSON

null：有效的 JSON 值。
undefined：無效的 JSON 值。

keyword

null：是 keywords。（沒辦法作為變數名稱）
undefined：不是 keywords。（但 千萬不要 將變數名稱設為 undefined）

JS 中變數 undefined 比起 null，更相似其它語言的 NULL。（因為預設值）

除非很熟悉，不然新手一律不建議將變數設置 null 或 undefined。

有興趣可以參考下方幾篇 stackoverflow 的討論