JavaScript 可選鏈運算符 (?.) 與 空值合併運算符 (??) 介紹

在編寫 JS 時，相信許多人都遇過以下錯誤

發生原因是從 nullish value (null 或 undefined) 上讀取屬性或是調用方法，解決方式是先判斷對象是否不為 nullish 後再取值，比較常見的方式是使用 && 處理。

let person = null

console.log(person) 
// null

console.log(person.name) 
// Uncaught TypeError: Cannot read property 'name' of null

console.log(person && person.name) 
// undefined

person = { name: 'Tom' }

console.log(person && person.name) 
// Tom

看起來很方便又簡短，但如果有多層需要判斷呢

obj && obj.a && obj.a.b && obj.a.b.c

在以上範例中，使用了很多重複性的代碼來判斷 obj 內的每一層是否為 nullish，此時可使用 可選鏈運算符(?.) 代替。

obj?.a?.b?.c

看起來是否簡潔很多呢！當 可選鏈運算符 遇到 nullish 時會返回 undeinfed 然後跳過後面的運算式，可搭配 空值合併運算符(??) 設定 nullish 時的預設值。

// 當 obj?.a?.b?.value 為 nullish 時返回 -1
obj?.a?.b?.value ?? -1

?? 與 || 的差別是，當 ?? 左側操作數為 nullish 時返回右側的值， 當 || 左側操作數為 falsy 時返回右側的值。

let value = null

console.log(value ?? -1) // -1
console.log(value || -1) // -1 

value = 0

console.log(value ?? -1) // 0
console.log(value || -1) // -1