?? で既定値を用意する

解説

このレッスンで分かること

• A ?? B は A が null か undefined のときだけ B を返します
• || は falsy すべてに反応するので、0 や空文字まで既定値に置き換えてしまいます

閲覧数 0 の作品が「未計測」と表示される

値が未設定のときに代わりの値を出す処理は、アプリを作るとほぼ必ず登場します。前のレッスンの || を使えば、左が空っぽのときに右へ倒せます。ところが、この書き方には落とし穴があります。

計測できていないわけではないのに、「未計測」と表示されてしまいました。0 は falsy なので、|| が右辺に切り替えたからです。|| は「空っぽに見えるもの」すべてに反応する、というのが原因です。

?? が反応するのは null と undefined だけ

?? は null 合体演算子と呼び、左辺が null か undefined のときだけ右辺を返します。0 や空文字はそのまま残ります。

下の 3 行が要点です。0 "" false は「値が入っていない」のではなく「その値が入っている」状態です。?? はそれを尊重して、そのまま返します。

解説

使い分けの目安は次のとおりです。「値が存在しないときだけ埋めたい」なら ??、「空欄もまとめて埋めたい」なら || です。空文字を未入力とみなしたい欄なら || のほうが正しい、という場面もあります。どちらが正しいかは仕様が決めます。

つなげると候補の優先順位になる

?? は連続して書けます。左から順に見ていき、最初に null でも undefined でもない値が採用されます。外から来たデータを画面に出すときに効いてきます。API の返す JSON、フォームの入力値、保存された設定。どれも「その項目が無い」ことがふつうに起こります。

fontSize に注目してください。0 という設定値が入っているので、?? はそれを尊重します。|| を使っていたら 16 に書き換わり、ユーザーがわざわざ 0 に設定した意味が消えます。ユーザーが選んだ値を勝手に上書きしない、という点で ?? は誠実な演算子です。

なお、渡されなかった引数は undefined になります。?? は undefined にも反応するので、引数を渡し忘れた呼び出しでも既定値へ倒れて壊れません。

よくある間違い

• 0 を消してしまう — count || 10 は、count が 0 のとき 10 になります。件数や金額のように 0 に意味がある値には ?? を使ってください
• ?? を || や && と括弧なしで混ぜる — a ?? b || c は SyntaxError です。どちらを先に評価するかが紛らわしいため、言語仕様として括弧を必須にしています。(a ?? b) || c のように、自分で書いて明示してください

1. 関数名は displayName、引数は nickname と fullName の 2 つにすること
2. ?? を使い、null と undefined のときだけ次の候補に進むこと
3. 空文字 "" はそのまま返すこと (|| を使うと空文字が消えてしまう)
4. どちらも未設定なら文字列 "名無し" を返すこと