JavaScriptのオプショナルチェーン「?.」でエラー回避

最近JavaScriptの勉強をし始めているのですが、
ChatGPT君があまり見慣れないもの「?.」を使ってきたので調べてみました。

オプショナルチェーン「?.」

JavaScriptにはオプショナルチェーンという、オブジェクトのプロパティにアクセスする際に、プロパティが存在しないときにエラーを回避してUndifinedを返すようにするものがあるらしい。

例えば、次のようなオブジェクトがあったとします。

JavaScript

const obj = {
  child1: {
    key1: value1
    key2: value2
    // ...
  }
  child2: {
    key1: value1, // key1, key2, ... はchildxで共通のプロパティ
    key2: value2,
    // ...
  }
  child3: null
}

このオブジェクトからchild1のvalue1にアクセスする場合は、obj.child1.key1でアクセスできます。
しかし、child3のようにnullになってしまっているものにアクセスしようとすると例外が発生します。

console.log(obj.child3.key1)
-> TypeError

このような場合に、オプショナルチェーン「?.」を使うことでエラーを回避することができます。

console.log(obj.key3?.key1)
-> Undefined

欠損が存在するようなオブジェクトをループする際は便利そうな機能ですね。