search
LoginSignup
0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

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

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
What you can do with signing up
0
Help us understand the problem. What are the problem?