LoginSignup
0
0

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-05-28

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

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

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

どんな挙動をするのか

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

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

通常の記述で存在しないプロパティにアクセス

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

スクリーンショット 2022-05-28 11.02.41.png

しかし以下のように存在しないobj.test2にアクセスしようとすると、エラーが表示されます。
これは、undefinednullに対してプロパティを参照しようとするとエラーを吐くというJavaScriptの仕様によるものです。
スクリーンショット 2022-05-28 11.02.22.png

オプショナルチェーンを使うと

オプショナルチェーンを使うとundefinedが帰ります。
スクリーンショット 2022-05-28 11.16.09.png

何が良いか

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

obj != null ? obj.test2 : undefined

関数にも(番外編)

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

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

obj.funcBなんて無い、とエラーが表示される。
スクリーンショット 2022-05-28 11.42.36.png

オプショナルチェーンを使ってobj.funcB?.()とすると、undefined。
スクリーンショット 2022-05-28 11.42.49.png

使いどころ

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

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

参考文献

0
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0