More than 1 year has passed since last update.

JavaScriptのオプショナルチェーンを使ってオブジェクトの値にアクセスする。

Last updated at 2022-05-28Posted at 2022-05-28

オプショナルチェ-ンとは

オプショナルチェーン演算子 (?.)を使うと、オブジェクトの深い階層に存在するプロパティ・メソッドへのアクセスの際に、指定のプロパティが存在しない場合にエラーを吐かず、undefinedを返します。

これを使うことで、keyA.keyB.keyC...というようにオブジェクトチェーンで値を指定する時に、「keyBが存在しない場合にエラーを吐くな。。」といったことを気にせずかけます。

まずは、以下のようなオブジェクトを定義します。
こちらのプロパティにアクセスしつつ挙動を見ていきます。

const obj = {
  test: {
    key: 'value',
  },
}

以下のようにプロパティにアクセスすると、正常に値が帰ります。

しかし以下のように存在しないobj.test2にアクセスしようとすると、エラーが表示されます。
これは、undefinedやnullに対してプロパティを参照しようとするとエラーを吐くというJavaScriptの仕様によるものです。

オプショナルチェーンを使うとundefinedが帰ります。

ここまでを参考に、以下と同じような判定がされているということがわかります。
つまり、オプショナルチェーン演算子（.?）を使うことで以下のように存在の確認をする処理を書く必要がないことが良さと感じています。

obj != null ? obj.test2 : undefined

まずは、以下のようなオブジェクトを定義します。

const obj = {
  funcA: function () {
    console.log('func発火')
  },
}

obj.funcBなんて無い、とエラーが表示される。

オプショナルチェーンを使ってobj.funcB?.()とすると、undefined。

用途は外部APIを使う時に、それが存在するかどうかわからないような状況で使えそう。
→MDNに以下の記述がありました。

存在しない可能性がある関数の呼び出しを試行するときに、オプショナルチェーンを使うことができます。これはたとえば、ユーザーの端末上で使えなかったり、実装が古かったりするために使えなかったりする可能性がある API を使うときに役立ちます。