MDN: 可選鏈操作符( ?. )允許讀取位於連線物件鏈深處的屬性的值，而不必明確驗證鏈中的每個引用是否有效。?. 操作符的功能類似於 . 鏈式操作符，不同之處在於，在引用為空(nullish ) (null 或者 undefined) 的情況下不會引起錯誤，該表示式短路返回值是 undefined。與函式呼叫一起使用時，如果給定的函式不存在，則返回 undefined。

當嘗試訪問可能不存在的物件屬性時，可選鏈操作符將會使表示式更短、更簡明。在探索一個物件的內容時，如果不能確定哪些屬性必定存在，可選鏈操作符也是很有幫助的。

1. 與物件

   通過連線的物件的引用或函式可能是 undefined

   或 null 時，可選鏈操作符提供了一種方法來簡化被連線物件的值訪問。

   不使用可選鏈
   let a = obj.first && obj.first.second
   
   使用可選鏈
   let a = obj.first?.second
   

2. 與函式

   函式呼叫時如果被呼叫的方法不存在，使用可選鏈可以使表示式自動返回undefined而不是丟擲一個異常。

   let result = Foo.foo?.();
   

3. 與表示式

   當使用方括號與屬性名的形式來訪問屬性時，你也可以使用可選鏈操作符：

   let nestedProp = obj?.['prop' + 'Name'];
   

4. 與賦值

   可選鏈不能用於賦值

   let object = {};
   object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment
   

5. 與陣列

   let arrayItem = arr?.[42];
   

6. 與空值合併操作符

   空值合併操作符可以在使用可選鏈時設定一個預設值：

   let customer = {
     name: "Carl",
     details: { age: 82 }
   };
   let customerCity = customer?.city ?? "暗之城";
   console.log(customerCity); // “暗之城”
    
   

來源: [MDN](Web 開發技術 | MDN (mozilla.org))