JavaScript - Null, undefined, not defined 差異

Null, undefined, not defined 差異

null 與 undefined 差異

null 代表「空值」（有被賦予為空的值），轉為數值時為 0；undefined 代表「未定義」的原始值（尚未被賦予值），轉為數值時為 NaN

undefined 與 not defined 差異

undefined 是變數被宣告了但沒有賦值，屬於原始型別之一；not defined 是變數沒有被宣告，不屬於原始型別，是執行程式時的錯誤訊息 (runtime error)，需要被修正。

console.log(a) // 會報錯：Uncaught ReferenceError: a is not defined

var a
console.log(a)// undefined

const obj = {}
obj.a; // undefined
obj.a.r; // 會報錯：Cannot read properties of undefined (reading 'r')

Undefined

在 Javascript 中，當我們宣告了一個變數但沒有賦值時， Javascript 會給予變數預設的值 undefined，意思是「未定義」的值。

var a = 100

實際上 Javascript 在執行時是：

var a // 宣告了一個變數，並寫進記憶體，此時 a 的值為 undefined
a = 100 // 再將 100 賦值給 a

undefined 並不代表什麼都沒有，它在 Javascript 中是一個型別也是一個值，一樣會佔據記憶體空間。undefined 代表著變數最原始的狀態，並非人為操作的結果。

使用 typeof undefined 會回傳 undefined
undefined 轉為數值時為 NaN：Number(undefined) 會回傳 NaN

undefined 場景

undefined 常見於以下幾種情況：

當變數沒有提供初始值，預設值為 undefined
取用一個不存在的物件的屬性或陣列的元素時會回傳 undefined
函式沒有返回值 (return) 時，返回值默認為 undefined
使用 void 運算符時，後面的表達式不論如何皆回傳 undefined
若原本一個函式需要傳入參數，但是調用函式時沒有傳入參數，則返回值為 undefined

// 變數未被宣告: not defined
p // Uncaught ReferenceError: p is not defined

// 宣告變數但沒有提供初始值
var a
a // undefined

// 取用不存在的物件屬性或陣列元素
var obj = new Object()
obj.p // undefined

// 函數沒有 return 時，回傳值默認為 undefined
function f() {}
f() // undefined

// 調用函數時沒有傳入參數，該參數為 undefined，函式回傳 undefined
function f(x) {
  return x;
}
f() // undefined

// 使用 void 運算符，皆會回傳 undefined
console.log(void null) // undefined
console.log(void undefined) // undefined
console.log(void 123) // undefined
console.log(void 'hello') // undefined

null

null 意思是「沒有值」的空值。是用來讓開發者來宣告「空值」的 (Javascript 從來不會將值設定為 null），例如：曾經有資料，使用 null 將其清空。

轉為數值時為 0，Number(null) 會回傳 0
轉型成字串時會是字面上的英文： console.log(null + ''); // 'null'
typeof null 會回傳 object（JS 的一個 bug）
在做 DOM 元素操作時，若要獲取的 DOM 元素不存在，則會回傳 null

Number(null) // 0
typeof null // 'object'
consol.log(null + '') // 'null' --> string 型別，null 被轉型成字面上的英文
console.log(null + 5) // 5 --> number 型別，null 被轉型成數字 0

null 與 undefined 的共同點

都沒有屬性和方法，也不能額外添加屬性方法
皆為 Falsy Value (Boolean(undefined) // false, Boolean(null) // false)
皆為原始型別 (Primitive Type)

typeof undefined // undefined
typeof null // object

null == undefined // true，使用一般相等 (==) 會先轉型成相同型別再做比較，由於 null 與 undefined 都是 falsy 值，因此兩值相等
null === undefined // false，使用嚴格相等 (===) 因為兩者型別不相等因此為 false

Number(null) // 0
Number(undefined) // NaN

5 + null // 5， null 被轉型為 number 0
5 + undefined // NaN， undefined 無法被轉型為數字

Yachu's Dev Memo