👻

論理和とNull合体演算子の違い

2021/10/09に公開

はじめに

JavaScriptでコード書いているとき、 nullundefinde と上手く付き合うために以下のような記法をよく使うと思います。

&& ... 論理積
|| ... 論理和
hoge?.huga ... オプショナルチェーン
?? ... Null合体演算子

このうち 論理和Null合体演算子 の違いを理解せず使用されているケースをたまに見るため、その違いについて改めて記事として書こうと思いました。そのため、非常に短い記事になります。

論理和とNull合体演算子の違い

一言で言うと
論理和は左の値がfalsyの時、次の右の処理がよばれる
Null合体演算子は左の値が null または undefinde の時、次の右の処理がよばれる
です。
falsyな値とは以下です。(公式から引用)

false falseキーワード
0 数値ゼロ
-0 数値マイナスゼロ
0n BigInt で、論理値として使用された場合、 Number と同じ規則に従う
"" 空文字列の値
null 何も値が存在しないこと
undefinde プリミティブ値
NaN 非数

つまり 論理和 を使用すると
上記テーブルの値以外であれば短絡させます。

let toyA; //undefinde
const toyB = toyA || "doll"
// toyB ... "doll"

const count = 0 || 1
// count ... 1

const noNameMan = ""
const friendName = noNameMan || "Sakuragi"
// friendName ... "Sakuragi"

これに対し Null合体演算子nullundefind のみ短絡させます。

let toyA; //undefinde
const toyB = toyA ?? "doll"
// toyB ... "doll"

const count = 0 ?? 1
// count ... 0

const noNameMan = ""
const friendName = noNameMan ?? "Sakuragi"
// friendName ... ""

この違いを理解して使用しないと思わぬバグを招いてしまうため注意です。

終わりに

最後まで読んでいただきありがとうございました。
Null 合体(??)

Discussion