はじめに

JavaScriptでの||（論理和演算子）と??（Nullish Coalescing演算子）は、どちらも値を選択する際に使われる演算子ですが、それぞれの動作には重要な違いがあります。

||（論理和演算子）

aが偽の値（Falsy）であればbを返し、それ以外はaを返します。

a || b

偽（Falsy）とみなされる値は以下の通りです。

• false
• 0
• ""（空文字列）
• null
• undefined
• NaN

const result1 = "" || "default";   // result1は "default"
const result2 = 0 || 42;           // result2は 42
const result3 = "hello" || "world"; // result3は "hello"

||は、aがfalse、0、""（空文字列）、null、undefined、またはNaNのいずれかであれば、bを返します。したがって、aが他のどんな真の値（Truth）であれば、それを返します。

??（Nullish Coalescing演算子）

aがnullまたはundefinedであればbを返し、それ以外はaを返します。

a ?? b

const result4 = null ?? "default";   // result4は "default"
const result5 = undefined ?? 42;     // result5は 42
const result6 = "" ?? "world";       // result6は ""（空文字）
const result7 = 0 ?? 100;            // result7は 0

??は、aがnullまたはundefinedのときにのみbを返します。したがって、aがfalse、0、または""（空文字列）であっても、それを返します。

まとめ

0や""（空文字列）といった「偽の値」を有効な値として扱いたい場合には??を使い、そうでなければ||を使うといった選択が可能です。