Zenn
🧠

|| と ?? をコードの意図を伝えるという観点で使い分ける

2022/09/08に公開
JavaScript
TypeScript
tech

自分が || と ?? の使い分ける場合にどのような思考過程を経ているかを言語化しておきたい。

|| と ?? の違い

詳しくは以下を参照してください。

|| を使う場合

|| は左辺が falsy な値の場合に右辺の値を採用したい場合に利用します

たとえば、以下は input の値に空の文字列を含む falsey な値が入っていた場合に (please input) という文字列を出力します。

const input: string = inputSomething() // 何か入力させる

console.log(`Your name: ${input || '(please input)'}`)
// => "Your name: (please input)"

?? を使う場合

?? は左辺の値が null や undefined の場合に右辺の値を採用したい場合に利用します

たとえば、以下は input の値が null や undefined のような Nullish な値が入っていた場合に '' (空文字列) を出力します。

const input: string | null | undefined = getName() // DB や API などから取得する

console.log(`Your name: ${input ?? ''}`)
// => "Your name: "

🤔結果が同じであればどっちでもよくない?

そのような考え方もありますが、コードを読む立場からすると結果は同じでもコードから読み取れる意図が異なるので、使い分けを意識してもらいたいです。

たとえば、以下のコードを見てみます。

const input: string | undefined = getName() // DB や API などから取得する

console.log(`Your name: ${input || ''}`)
// => "Your name: "

このコードの実行結果は「?? を使う場合」と同じ結果になりますがコードから読み取れる意図が異なります。

このコードを読むと以下のような思考の過程をたどります

  • input が falsy な値な値が入ってくることを想定しており、その場合に '' を出力することを意図している
  • ここでの falsy な値は型の定義から undefined, ''(空文字列) に限定される
  • 左辺に '' が来た場合は右辺の値 '' に置き換えられることになる
  • しかし、その動作に意味が無いことに対して矛盾を認識する ⬅ ここでコードの意図がわからなくなる
  • コードの矛盾を補ういくつかの可能性を考える
    • 型を間違えている?
    • 右辺の値は本来 '' ではなく別の値を入れるべきだった?

というように、プログラムの動作としては同じでもコードが伝えるその意図は異なります。

個人的には、結果は一緒だけど意味をなさないケースが存在しているとコードから伝わる作成者の意図が「ぼやけて」感じます [1]

ということで

結果が同じで手間もさほど変わらないのであれば、コードを読む人に意図が伝わる方法を選択してもらいたい。

という話でした。

脚注

  1. コードを読んでいて 95% くらいの確率でこういう意図だろうけど、5% くらいの確率で別の意図かもしれない。というなんとも言えないふわっとした感覚になります。 ↩︎

Discussion