Yachu's Dev Memo
JavaScript - Null, undefined, not defined 差異

JavaScript - Null, undefined, not defined 差異

Ya Chu's photo
Ya Chu
·

2 min read

Table of contents

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 無法被轉型為數字

Ref

JavaScriptNullundefined