急に??が出てきたけどなんだこれ！？

コードの中に急に現れる"??"

見慣れない人からしたらびっくりしてしまうかもしれませんね。

しかもちょっと調べ辛い・・・。（？を検索しても認識してくれなかったり。）

このはてな（クエスチョン）を２つ並べるものは「Null合体演算子」と言います。

今回はこの「Null合体演算子」について紹介したいと思います。

これは論理演算子の一種です。

左辺を評価し結果がnullもしくはundefinedのときには右辺を返します。

const hoge = null ?? "hoge";
// => "hoge"

const hoge = true ?? "hoge";
// => true

このように左辺の結果によって右辺を代入することができます。

条件文をスマートに記述できるため、ぜひ取り入れていきましょう！

Null合体演算子(??)は使ったことはないけど論理和演算子(||)は使ったことがあるといった人もいると思います。

たしかにパッと見同じような・・・。

と思いますが、明確な違いがあります。

それはNull合体演算子の場合はnull,undefinedの場合でのみ右辺を返しますが、論理和演算子の場合はFalsyな値の場合に右辺を返します。

Falsyな値とはfalse(偽)として扱われる値のこと。

JavaScriptでは""や0をfalseとして扱います。

つまり実際に比較をしてみると下記のようになります。

const hoge = "" ?? "hoge":
// => ""

const hoge = "" || "hoge";
// => "hoge"

const hoge = 0 ?? "hoge";
// => 0

const hoge = 0 || "hoge";
// => "hoge"

このようにこれらの2つの演算子には明確な違いがあります。

Falsyな値を許容してしまうと思わぬところでバグを生んでしまう可能性があります。

使いどころによってはかなり有効に使えると思いますので、積極的に使っていきたいですね。