Optional Chaining と Nullish Coalescing
ES2020, TypeScript 3.7 から導入された記法。
node では 13系からオプション指定をすることで (--harmony)、14系からは標準で使用できるようになっている。
記法
項目 | 記法 |
---|---|
Optional Chaining | ?. |
Nullish Coalescing | ?? |
Optional Chaining
挙動: プロパティを取るチェーンの途中でエラーを出さず、最終的に取れればそれを、取れなければ undefined
を返す
例えば以下のコードにおいて
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 である。
最後の行の .
を ?.
とするだけで、その挙動になる。
users.forEach(user => console.log(user.name, user?.career?.university));
// 実行結果
// sample user Hoge大
// invalid user undefined
Nullish Coalescing
挙動: null
か undefined
の場合のみ右側を評価し、そうでない場合は左側の被演算子を返す
例えば以下のようなコードがあったとする。
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 が有効である。
そしてそれは先ほどのコードの ||
を ??
に書き換えるだけで完了する。
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
を使うと、短く簡潔にかける。