オプショナルチェイニング(?.)の何が凄いのか

PJで何気なく使っていたオプショナルチェイニングですが、少し調べてみると何が凄いのか理解せずに使っていたなぁ〜と。アウトプットも兼ねて詳しくまとめてみようと思います。

オプショナルチェイニングは、ネストされたオブジェクトプロパティへ安全にアクセスするための方法です。
いきなりオプショナルチェイニングを使用した例を紹介してもあまり恩恵を感じられないと思うので、まずは通常のプロパティアクセスの例から紹介していきます。

通常のプロパティアクセス

type User = {
  name: string;
  size?: Size;
};

type Size = {
  height: number;
  weight: number;
}

function callHeight(human: User) {
  //構文エラー　Object is possibly 'undefined'
  const height = human.size.height;
  console.log(height);
}

こちらは通常のプロパティアクセスの例です。
まず、関数callHeightに渡される引数humanについての説明ですが、nameプロパティとオプショナルなsizeオブジェクトプロパティを持ちます。また、sizeプロパティはheightプロパティとweightプロパティで構成されています。

次にcallHeight関数についてですが、変数heightにユーザーの身長を代入して出力する関数です。ただ、この関数では、human.size.heightのプロパティアクセス時に構文エラーが表示されています。sizeプロパティがオプショナルとして定義されているので、human.size部分がundefinedの可能性があり、もしundefinedであった場合はheightプロパティにアクセスできないからです。

こちらをうまく機能させようとすると以下になります。

function callHeight(human: User) {
  const height = human.size? human.size.height : undefined;
  console.log(height);
}

三項演算子を使用してhuman.sizeの値が存在する場合は、heightプロパティにアクセスして値を返します。また存在しない場合は、undefinedを返すようになります。

このように記述すると構文エラーが表示されませんが、三項演算子でhuman.sizeを2回繰り返している点が冗長に感じます。

では、こちらをオプショナルチェイニングを用いて再定義してみましょう。

オプショナルチェイニングを用いたプロパティアクセス

function callHeight(human: User) {
  const height = human.size?.height;
  console.log(height);
}

非常に簡潔に記述することができました。
オプショナルチェイニングについて説明しますと、?.以前の部分に値が存在がする場合は値を返し、nullishな値(undefinedもしくはnull)であった場合はundefinedを返します。
つまり、human.sizeが存在する場合はhuman.size.heightを返し、human.sizeがnullishな値(undefinedもしくはnull)であった場合はundefinedを返すということです。

このようにオプショナルチェイニングを用いることによって、冗長な表現を簡潔に記述することができます。