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') // 0
console.log(bar ?? 'default') // false
console.log(baz ?? 'default') // ''

console.log(foo ? foo : 'falsy') // 'falsy'
console.log(bar ? bar : 'falsy') // 'falsy'
console.log(baz ? baz : 'falsy') // 'falsy'

`??` と `? :` の役割は異なる

これまで見てきたように、?? は デフォルト値を扱う ことを目的としています。
? : は falsy / truthy を扱う演算子であり、役割は異なります。

しかし、両者がオーバーラップしているのも事実です。

まとめなど

?? には以下の利点があると言えます。

無駄がない構文
0 / '' をそのまま扱える
falsyを扱わないことによる、隙のない実装

判定条件と返り値が同一

?? を使うことで、無駄のないコードになります。

// foo を2度記述している
const bar = foo ? foo : 'falsy'

// 簡潔
const bar = foo ?? 'default'

`Object` のプロパティ

三項演算子に加え、オプショナルチェイニングとも比較しました。
デフォルト値を簡潔に設定できます。

obj.title ??= 'Untitled'

// 冗長
obj.title = obj.title ? obj.title : 'Untitled'

// デフォルト値を設定できない
obj.title?

`0` / `''` をそのまま扱える

具体例が思いつきませんでした。
何かあれば教えてください。