為什麼需要 Optional Chaining ? 解決了什麼問題

在取得一個 Object 的屬性的值之前，我們需要先確認一個屬性的值是否被定義，當 Object 有很多層的嵌套，就有可能產生 Uncaught TypeError 終止程式的運行。

為了防止 Uncaught TypeError 錯誤訊息發生我們會這樣做

if (obj && obj.property1 && obj.property1.property2 && obj.property1.property2.property3) {
    console.log('has property3')
}

有了 Optional chaining 會怎麼樣？

if (obj?.property1?.property2?.property3) {
    console.log('has property3')
}

是不是更簡潔了呢？

Optional Chaining 最主要的功能，就是防止錯誤訊息產生

Optional Chaining 是怎麼運作的 ?

判斷 ?. 左邊的值，如果是 null 或 undefined 的話就 return undefined，如果不是就繼續向右執行。

Use Case

object property

const value = obj?.property1?.property2

object method

obj?.method()

function

function?.()

array

const item = arr?.[10]

參考資料

Optional Chaining Has Arrived!
Optional chaining '?.'
Optional chaining (?.)