Null合体演算子（??）とOR演算子（||）の違い

JavaScriptでNull合体演算子（??）を使って、値が「null」または「undefined」の場合に別の値を取得するような処理がありますが、似たようなものにOR演算子（||）があって、2つの演算子がどう違うのか分かっていなかったのでメモっておきます。

Null合体演算子（??）を使ったコードの例。

console.log(null ?? "default");
console.log(undefined ?? "default");
console.log(false ?? "default");
console.log(true ?? "default");
console.log("aaa" ?? "default");

実行結果は以下の通り。

default
default
false
true
aaa

Null合体演算子（??）の場合、左辺の値が「null」または「undefined」の時に、右の値（default）が返っています。

bool値である「true」や「false」はそのまま出力されるのが特徴。

OR演算子（||）を使ったコードの例。

console.log(null || "default");
console.log(undefined || "default");
console.log(false || "default");
console.log(true || "default");
console.log("aaa" || "default");

実行結果は以下の通り。

default
default
default
true
aaa

OR演算子は左辺の値がfalsyな場合に右辺の処理が実行されるので、bool値「false」の場合、右辺の値（default）が返されています。

Null合体演算子（??）とOR演算子（||）の違いは、bool値「false」の扱いが違うことろです。

OR演算子（||）は判定条件に利用することが多く、上記のような使い方は慣れていないとギョっとするので、可能ならNull合体演算子（??）を個人的には使いたいところ。

ただし、Null合体演算子（??）を使う場合は対応ブラウザに注意する必要があります。

Null合体演算子 - JavaScript | MDN