初探 Optional chaining (?.)

前言

  最近發現 JavaScript 有個 Optional chaining 的語法，在此把學習的過程做個紀錄。

內容

  範例如下

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};
const dogName = adventurer?.name;
//Follow code has the same result...
//const dogName = adventurer.dog && adventurer.dog.name;
console.log(dogName);//Alice
//
const catName = adventurer?.cat?.name;
console.log(catName);//Dinah

Optional chaining  用來簡化程式碼，在寫程式常常需要檢查物件是否存在，若存在提取其內容這樣的邏輯，用 ?. 的語法就可以快速完成，範例的 dogName 會先確認 adventurer 是否存在，若存在回傳 aadventurer.name ，若不存在則是回傳 undefined ，這點要注意。這個語法還可以使用在巢狀結構，如範例的 catName 的應用，先確認 adventurer  是否存在，再確認 adventurer.cat 的存在，都沒問題才回傳 adventurer.cat.name 。

參考資料

[ developer.mozilla.org ] Optional chaining (?.)