Overview
null 合体演算子 ?? は、三項演算子? :と比較し以下の2点に違いがあります。
- 無駄のない構文
-
null/undefinedのみを判定条件とする
null 合体演算子 ?? とは
null 合体演算子 ?? は、null / undefined の値にデフォルト値をあてる演算子です。
ES2020で追加されました。
直感的な使い方
以下の例からわかるように、スマートかつ直感的な構文です。
const foo = null
const bar = undefined
console.log(foo ?? 'default') // 'default'
console.log(bar ?? 'default') // 'default'
三項演算子 ? : との違い
無駄のない構文
三項演算子では、同じ記述を繰り返す場合があります。
// foo を2度記述している
foo ? foo : 'falsy'
// 簡潔
foo ?? 'default'
0 / false / '' の扱い
null 合体演算子では、null / undefined に対しデフォルト値をあてます。
一方、三項演算子では falsy (0 / false / '' など) を false として扱います。
const foo = 0
const bar = false
const baz = ''
console.log(foo ?? 'default')
console.log(bar ?? 'default')
console.log(baz ?? 'default')
console.log(foo ? foo : 'falsy')
console.log(bar ? bar : 'falsy')
console.log(baz ? baz : 'falsy')
?? と ? : の役割は異なる
これまで見てきたように、?? は デフォルト値を扱う ことを目的としています。
? : は falsy / truthy を扱う演算子であり、役割は異なります。
しかし、両者がオーバーラップしているのも事実です。
まとめなど
?? には以下の利点があると言えます。
- 無駄がない構文
-
0/''をそのまま扱える -
falsyを扱わないことによる、隙のない実装
判定条件と返り値が同一
?? を使うことで、無駄のないコードになります。
// foo を2度記述している
foo ? foo : 'falsy'
// 簡潔
foo ?? 'default'
Object のプロパティ
三項演算子に加え、オプショナルチェイニングとも比較しました。
デフォルト値を簡潔に設定できます。
obj.title ?? 'Untitled'
// 冗長
obj.title ? obj.title : 'Untitled'
// デフォルト値を設定できない
obj.title?
0 / '' をそのまま扱える
具体例が思いつきませんでした。
何かあれば教えてください。