How to Use Optional Chaining Operator in JavaScript

Node.js：v18.7.0

在 JavaSciprt 中，進行多層的物件存取時，常常可能因為中間某層的物件不存在而出現 Runtime Error。因此在 ES2020 之中，加入了由 Ecma TC39（Ecma Technical Comitee 39） 提出來的 Optional Chaining Operator（可選串連）。

Optional Chaining Operator(?.) 會在物件變數不存在或 null 時回傳 undefined，如果有值的話則會繼續往下取值。

Basic Usage

Optional Chaining Operator 操作很容易，只需要取用市在變數後方加入 ? 即可。

範例

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

// 因為沒有 dog，所以會回傳 undefined，且不會有 Runtime Error
const dogName = adventurer.dog?.name;
console.log(dogName);

Optional Chaining Operator 也可以應用在 function 上。

範例

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

// Return undefined
console.log(adventurer.func?.());

Notice： node.js 在 version 13 之前都不支援，如需使用需要再加上 --harmony tag。