はじめに
const a = 0 ?? 5;
const b = 0 || 5;
const c = 0 && 5;
const d = !!0;
このa, b, c, dに何が入るかみなさんわかりますか？
上から順に、Null合体演算子、論理和、論理積、二重否定と呼ばれます。
これがわかる皆さんにこの記事は必要ありません!! (<-これは二重否定ではない)
解説の中でfalsyという単語が頻出します。
これはnull, undefinedだけでなく、0や""(空文字列)などのfalseとみなされる値のことです。
詳しくはこちら。
Null合体演算子
名前の通り、Null判別が合体した演算子です。
??の左辺がNullの場合、右辺を返します。Nullと判別される値はnullとundefinedのみです。
つまり、実行結果は下記のようになります。
const a = 0 ?? 5;
console.log(a); // 0
論理和 & 論理積
これらはifでよく使うため、まとめて解説します。
||は左辺がfalsyの場合、右辺を返します。
&&は左辺がfalsyの場合、左辺を返します。
つまり、実行結果は下記のようになります。
const b = 0 || 5;
console.log(b); // 5
const c = 0 && 5;
console.log(c) // 0
ifでの結果を思い浮かべればわかりやすいと思いますが、論理和はor演算子とも呼ばれ、どちらかがtrueなら動作します。
論理積はand演算子と呼ばれ、両方trueなら動作します。そのため、falseの場合のファストリターンは理にかなった設計と思われます。
参考記事
論理和
論理積
二重否定
!一つが否定なのはみなさん承知だと思います。!!はそのままで、否定をさらに否定する二重否定となります。
これで何ができるのかというと、boolean以外の型をbooleanに変換できるということです。
falsyな値はfalseへ。それ以外はtrueに変換されます。
const d = !!0
console.log(d); // false
参考記事
最後に
それぞれの演算子には優先順位が定まっていたり、??と||は一つの式で使えないなどの決まりがあります(ただし()を使えば大丈夫)。
その細かい部分については下記ドキュメントを参考にしてください。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Operator_precedence