ES2020で追加されたオプショナルチェーン演算子（?.）を調べてみた

オプショナルチェーン演算子とは

オプショナルチェーン演算子とは、オブジェクトの参照の際、?.構文を用いてアクセスをする方法です。参照する値がnullやundefinedの場合でもエラーにならず、undefinedを返却します。オブジェクトの値を参照する際よく利用する. チェーン演算子と基本的に使い方は一緒です。

実際に使ってみる

「. チェーン演算子でもundefinedを返却するんじゃないの？」と思った方もいらっしゃるかと思いますので、実際に使ってみてどういった挙動になるか確認してみます。まず初めに参照するオブジェクトを用意します。

const data = {
  user: 'John'
}

このオブジェクトのプロパティにアクセスするには、通常obj.userでアクセスを行うと思います。では、ageというdataオブジェクトに登録されていないプロパティにアクセスしてみたいと思います。

const data = {
  user: 'John'
}
data.age
// => undefined

. チェーン演算子を利用してもエラーとならずundefinedを返却します。では次に、以下の場合を試してみましょう。

const data = {
  user: 'John',
  height: {
    value: 175,
  }
}
data.age.value
// => Cannot read property 'value' of undefined

先程と違いdata.age.valueの場合は、undefinedまたはnullの値に対して、アクセスを行っているためエラーになってしまいます。しかし、データによってはageプロパティが設定される可能性がある場合、どのような記述でアクセスすればエラーとならずに処理を行えるでしょうか？そういったシチュエーションの時利用するのが、オプショナルチェーン演算子です。

const data = {
  user: 'John',
  height: {
    value: 175,
  }
}
data.age?.value
// => undefined

最初にも書きましたが、オプショナルチェーン演算子は、参照する値がnullやundefinedの場合、undefinedを返却する機能を持っている為、エラーとならずアクセスすることができます。では、オプショナルチェーン演算子が登場する前は、どのようにアクセスしていたか試してみみましょう。

const data = {
  user: 'John',
  height: {
    value: 175,
  }
}
data.age && data.age.value
// => undefined

従来のコードでは&&演算子を用いてアクセスを行ってました。今回のサンプルは、参照までのネストが浅いため「従来のコードでもそれほど長い記述じゃないな〜」と思われた方もいらっしゃるかとおもいますが、これが例えばdata.profile.birthday.age.valueのようなプロパティに安全にアクセスする場合、とてつもなく長く、読みづらいコードになってしまいます。

// 従来の場合
data.profile && data.profile.birthday && data.profile.birthday.age && data.profile.birthday.age.value

// オプショナルチェーン演算子の場合
data.profile?.birthday?.age?.value

オプショナルチェーン演算子を利用したほうがスッキリとわかりやすく書けるかと思います。

まとめ

参照先が定義されていなく、Cannot read property '***' of undefinedというエラーになってしまう場面は、JavaScriptで開発しているとよく遭遇するのではないでしょうか？そういう場面に出くわした際、是非このオプショナルチェーン演算子を思い出して、スッキリしたコードでプロパティにアクセスしてみてください。

TOC

オプショナルチェーン演算子とは

実際に使ってみる

まとめ