オプショナルチェーン演算子を使ってみる

オプショナルチェーン(optional chaining)演算子を使って、オブジェクトの中を参照する方法を試してみます。

サンプルコード

オプショナルチェーン演算子(?.)を使ってオブジェクトを参照することで、参照した値がnullかundefinedだった場合にエラーとならず、undefinedを返すようになります。
まずは使用前の例です。

const data = {
  name: '鈴木羽那',
  age: 18
};

console.log(data.name); // 鈴木羽那
console.log(data.size); // undefined
console.log(data.size.height); // Uncaught TypeError: Cannot read properties of undefined (reading 'height')

上記のようにdataにsizeがなくundefinedを返している状態で、さらにその中(height)を参照しようとするとエラーになります。
オブジェクトを参照するデモページ1

オプショナルチェーン演算子(?.)を使った形に変更してみます。

const data = {
  name: '鈴木羽那',
  age: 18
};

console.log(data.name); // 鈴木羽那
console.log(data.size); // undefined
console.log(data.size?.height); // undefined

sizeの中のheightを参照していますが、エラーにならずundefinedを返すようになりました。
オブジェクトを参照するデモページ2

DOM要素へのアクセスの際にも使用できます。
まずは使用前です。

const link = document.querySelector('.link');
console.log(link); // null
const url = link.href; // Uncaught TypeError: Cannot read properties of null (reading 'href')
console.log(url);

.linkのhref属性を取得しようとしていますが、.linkが存在しないためエラーになります。
DOM要素を参照するデモページ

次にオプショナルチェーン演算子を使用した場合です。

const link = document.querySelector('.link');
console.log(link); // null
const url = link?.href;
console.log(url); // undefined

.linkが存在しない場合でもエラーにならず、undefinedを返すようになりました。
DOM要素を参照するデモページ2

このように、オブジェクトのデータやDOM要素で存在するかが分からないときに使用すると便利です。