Optional Chaining と Nullish Coalescing

ES2020, TypeScript 3.7 から導入された記法。
node では 13系からオプション指定をすることで (--harmony)、14系からは標準で使用できるようになっている。

記法

項目	記法
Optional Chaining	`?.`
Nullish Coalescing	??

Optional Chaining

挙動: プロパティを取るチェーンの途中でエラーを出さず、最終的に取れればそれを、取れなければ undefined を返す

例えば以下のコードにおいて

optionalChaining.js

const users = [
  {
    id: 1,
    name: 'sample user',
    career: {
      university: 'Hoge大',
    },
  },
  {
    id: 2,
    name: 'invalid user',
  },
]

users.forEach(user => console.log(user.name, user.career.university));

users[1] の user.career.university にアクセスしようとすると

TypeError: Cannot read property 'university' of undefined

というエラーが起こる。
user.career までなら　undefined が帰ってくるが、user.career.university までアクセスしようとすると怒られる。
これを何重に行っても怒られず、そのチェーン先プロパティが存在しない場合に、常に undefined を返してくれるようにするのが Optional Chaining である。
最後の行の . を ?. とするだけで、その挙動になる。

optionalChaining.js

users.forEach(user => console.log(user.name, user?.career?.university));
// 実行結果
// sample user Hoge大
// invalid user undefined

Nullish Coalescing

挙動: null か undefined の場合のみ右側を評価し、そうでない場合は左側の被演算子を返す

例えば以下のようなコードがあったとする。

nullishCoalescing.js

const user = {
  id: 1,
  name: 'sample user',
  career: {
    university: 'Hoge大',
    high_school: null,
  },
}

console.log(user.career.high_school || '高校登録なし')

ただし、|| は falsy な値すべてを false 扱いしてしまう。

false
""
0
undefined
null

そうではなく、純粋に左側の被演算子が null (存在しないという意味) か undefined (定義されていない) の場合に、右側を評価したい場合 Nullish Coalescing が有効である。
そしてそれは先ほどのコードの || を ?? に書き換えるだけで完了する。

nullishCoalescing.js

const user = {
  id: 1,
  name: 'sample user',
  career: {
    university: 'Hoge大',
    high_school: null,
  },
}

console.log(user.career.high_school ?? '高校登録なし')
// => 高校登録なし

結論

今後ネストしたプロパティにアクセスするときは Optional Chaining
null または undefined という判定をしたいなら Nullish Coalescing
を使うと、短く簡潔にかける。