Javascript - NaN(Not a Number)

什麼是 NaN

NaN(Not a Number) 顧名思義就是非數字

• NaN 的型別是 Number： typeof NaN // Number
• NaN 不等於任何值，也不等於自己NaN === NaN // false

typeof NaN // number
NaN === NaN // false

備註：在 IEEE 754 的規範中就有定義如果判斷式遇到 NaN 就要回傳 false

在什麼情況下會出現 NaN

會出現 NaN 的情境：

• 運算元無法被轉為 Number
• 0 除以 0
• 負數的平方根
• 對 Infinity 做「除法」或「減法」運算：因為 Infinity 本身為大到無法表示的值，因此針對 Infinity 做加減乘除是沒有意義的
  • Inifinity + Infinity => 回傳 Infinity
  • Inifinity - Infinity => 回傳 NaN
  • Inifinity * Infinity => 回傳 Infinity
  • Inifinity / Infinity => 回傳 NaN
• 運算元為 NaN

// 運算元無法被轉為 Number
Number('hello') // NaN
Number(undefined) // NaN
5 + undefined // NaN

// 0 除以 0 
0/0 // NaN

// 負數的平方根
Math.sqrt(-3) // NaN

// 對 Infinity 做除法或減法運算
Infinity / Infinity // NaN
Infinity - Infinity // NaN

// 運算元為 NaN
NaN + 1 // NaN
NaN - 2 // NaN
NaN * 3 // NaN
NaN / 4 // NaN

如何偵測變數中的資料是 NaN

透過以下兩種方法來偵測資料是否為 NaN：

1. Number.isNaN()

Number.isNaN(value)

當 value 為 NaN、String 或 Object 時，會回傳 true。

Number.isNaN vs. global isNaN

29.1 Use Number.isNaN instead of global isNaN @ airbnb validate number @ 30 seconds of code

使用 isNaN 一開始會做 Number() 的數值轉換，假如遇到的是空字串或 Boolean 很可能會因為先做數值轉換的關係產生非預期的最終結果。

因此建議使用 Number.isNaN() （不會進行 Number() 的數值轉換）的方式來進行判斷。

// bad
isNaN('1.2'); // false，Number('1.2') 轉換成數字 1.2
isNaN('1.2.3'); // true，Number('1.2.2') 無法轉換，回傳 NaN

// good
Number.isNaN('1.2.3'); // false
Number.isNaN(Number('1.2.3')); // true

2. 利用 NaN 不等於任何值（包括本身）的特性

一般正常的變數自己等於自己一定會是 true，只有 NaN === NaN 會是 false。

也就是說，當一個變數自己等於自己是 false 的話，就可以推斷這個變數一定是 NaN 。

if(x!==x){
    
} // 只有在 x 為 NaN 時，結果才為 true

Ref

• NaN & Infinity
• JavaScript 有趣的冷知識 ：神奇的 NaN