想知道嗎：可選串連 跟 雙問號語法

可選串連

對接資料的過程中，有些 response 若是 object ，假設已知會有

{
 cat: {
  name: “Puipui”
 },
 dog: {
  name: "Ruru"
 }
}

這樣的格式回來，有時候可能只會有 cat 而沒有 dog ，有時候又可能只會有 dog 而沒有 cat ，那這樣若每次都寫 response.cat.name ，當 response 剛好沒有 cat 的時候，就會噴錯噴爆…那難道每次都要寫

response.cat && response.cat.name;

來去驗證 cat 在不在嗎？也太麻煩了吧？

可選串連 解決了這樣的困擾，使用 ?. 去尋找所選 key 值存不存在，若存在再去尋找下一層的 key 值，省去了每次都要用 && 的困擾。

雙問號

雙問號 MDN 翻譯叫做 空值合併運算符 ，也是最近才出現的東西，範例如下：

const nullValue = null;
const emptyText = ""; // 空字符串，是一個假值，Boolean("") === false
const someNumber = 42;

const valA = nullValue ?? "valA 的默認值";
const valB = emptyText ?? "valB 的默認值";
const valC = someNumber ?? 0;

console.log(valA); // "valA 的默認值"
console.log(valB); // ""（空字符串雖然是假值，但不是 null 或者 undefined）
console.log(valC); // 42

只要 ?? 左邊不為 null 或 undefined ，都會回傳左邊的東西，不然就會回傳右邊的值，也算是減少程式碼的好幫手。

但是再這樣下去，JS 以後就會是滿滿的問號了吧ＸＤＤ