「JS筆記」實戰解析空值合併運算符(??)與 OR (||)運算子

前言

Logical Expression(邏輯運算式)，在我們寫 code 時出現機率非常高但過去 ?? 與 || 因為行為很像，假如沒搞懂其中差異，很容易就會寫錯，由於個人覺得 Logical AND(&&) 是較不容易被搞混的運算子，所以本篇文並不會多做介紹，尚不理解者可在拿關鍵字自行餵狗搜尋。

使用情境

首先我們先限縮下本文討論的使用情境，有別於 &&，很常出現的情境是用來條件渲染各種元件，?? 與 || 很常用來做資料渲染的判斷，尤其在製作大量Log，可能有大量數字文字欄位時，會希望在沒有資料時可以給予一個預設值，這時就會大量使用到 ?? 和 ||

Logical OR (||)

再 ES2020 之前僅有 && 與 || 可以做使用，而 || 在使用時會判對第一個(左側)值是否為「Falsy」若為 falsy 則回傳右側值：

// 使用 ||
const value = a || b

// 原始寫法，為方便示意，其實不用 Boolean(a)
const value = Boolean( a ) ? a : b

// if...else 寫法
let value
if ( a ) {
   value = a
} else {
   value = b
}

Nullish coalescing operator (??)

?? 和 || 的主要差異則在於，他僅會判斷值是否為「Nullish」，僅有 undefined 和 null 時才會使用右側值

// 使用 ??
const value = a ?? b

// 假如換成三元式
const value = (a !== undefined && a !== null) ? a : b

實戰

講完基本概念，當然需要一點實戰案例，不然豈不是太偷懶？

我們先上情境 1

當我們有一個大量的用戶資料 Table 要顯示字串資料，需求端希望用戶沒有填資訊的時候，不要顯示空白內容，給予預設值 N/A

此時我們接到 api 資料時便可以這樣寫：

// 假裝 data 是 api 接到的資料
const displayValue = data.name || "N/A"

為何要這樣用呢？ 因為這個 case 我們明顯不希望他顯示空白，然而某些時候用戶沒有輸入資料時，我們在儲存時可能會存 ""

所以在這裡我們便可以透過 || 來避免 "" 的出現

情境2

當我們今天換成要顯示一個數據的 Table , 裡面都是數字，用戶一樣希望沒有設定的內容顯示 N/A

此時我們可以：

// 假裝 data 是 api 接到的資料
const displayValue = data.total ?? "N/A"

這裡因為我們可以很明確知道 0 可能也是要呈現的資料，透過 ?? 就可以讓 0 可以正確的呈現出來，而不會變成 N/A

總結來說：

在使用上字串(string)的處理，我大多會用 || 來避免空字串的出現，而數字(number)我會傾向使用 ?? 來避免 0 無法正確顯示。

當然這還是要依照每個情況不同去做選用，但理解了最根本的邏輯後，相信在使用上也就不會那麼模糊了！