點燈坊

失くすものさえない今が強くなるチャンスよ

如何判斷 undefined ?

Sam Xiao's Avatar 2019-12-11

undefined 是 ECMAScript 很特殊的存在,實務上有多種判斷方式。

Version

macOS Catalina 10.15.1
VS Code 1.40.2
Quokka 1.0.262
ECMAScript 2015

Undefined

undefined 有 4 種可能:

  1. 有宣告 variable,但還沒給定初始值
  2. 還未宣告 variable
  3. 不存在的 property
  4. Function 未回傳任何值

===

var foo

foo === undefined // ?

foo 只有宣告,但沒有給定初始值,這種 undefined 可用 === undefined 抓到。

undefined000

foo === undefined // ?

foo 連宣告都沒有,雖然也是 undefined,但 === undefined 抓不到。

=== undefined 只能抓到有定義,但尚未初始化的 variable

undefined001

Falsy Value

var foo

!foo // ?

undefined 是 falsy value,因此也可以使用 ! 攔截到 undefined

false0''NaNnullundefined 都是 falsy value,因此也可能同時攔截到非 undefined

undefined004

!foo // ?

foo 連宣告都沒有,也是 undefined,但 falsy value 無法使用。

undefined005

void 0

var foo 

foo === void 0 // ?

根據 ECMAScript 定義,void operator 搭配任何 expression,期結果都是 undefined,因此也可以使用 void 0 來判斷。

undefined008

foo === void 0 // ?

foo 連宣告都沒有,也是 undefined,但 === void 0 抓不到。

undefined009

Object.prototype.toString()

var foo

Object.prototype.toString.call(foo).slice(8, -1) // ?

foo 只有宣告,但沒有給定初始值,這種 undefined 也可用 Object.prototype.toString() 抓到,但要判斷的是 Undefined string,第一個字母U 要大寫。

foo 要借用 Object.prototype.toString() ,因此使用 call()foo 傳進去,但 toString() 回傳為 [Object Undefined] string,因此要再使用 slice() 加工取得 Undefined

undefined006

Object.prototype.toString.call(foo).slice(8, -1) // ?

foo 連宣告都沒有,也是 undefined,但 Object.prototype.toString() 抓不到。

undefined007

typeof

var foo

typeof foo === 'undefined' // ?

foo 只有宣告,但沒有給定初始值,這種 undefined 可用 typeof 抓到,但回傳是 undefined string,不是 undefined value。

undefined002

typeof foo === 'undefined' // ?

foo 連宣告都沒有,也是 undefined,但 typeof 也可順利抓到 undefined

typeof 可以攔截到所有的 undefined,無論是有宣告的 variable 但尚未初始化,或者根本沒有宣告的 variable

undefined003

Conclusion

  • Falsy value 雖然方便,但可能會攔截到 undefined 以外的值,要小心使用

  • void 0 被強制定義為 undefined,因此也可用來判斷

  • Object.prototype.toString() 會傳出比 typeof 更詳細的型別資訊

  • 只有 typeof 可攔截到所有的 undefined,其判斷為 undefined string