Help us understand the problem. What is going on with this article?

Optional Chaining と Nullish Coalescing

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

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

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

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
を使うと、短く簡潔にかける。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away