Null合体演算子について(??)

Null合体演算子ってなーに

論理演算子の一つで、左辺がnullまたはundefinedの場合には、右辺の値を返して、そうでない場合には左辺の値を返すものです。
ES11で導入されたようです。

const hoge = null ?? "I am a person";
console.log(hoge);// I am a personが出力されます

const hogeHoge = "ok" ?? "I am a person";
console.log(hogeHoge);// ok が出力されます

こんな感じになります。

どんな場面で使えるの？

オプショナルチェーンと同時に用いることでより安全な書き方が可能になります。
（オプショナルチェーンに関しては私が書かせていただいたこちらの記事も同時にご参照ください🙇）

オプショナルチェーンでは、参照したプロパティが存在しない場合エラーではなく、undefinedが入るのですが、さらにNull合体演算子を組み合わせることで、nullやundefinedのときに代替する値をいれることができます！

const family = {};
const motherAge = family?.mother?.age ?? "〇〇";
console.log(`${motherAge}歳`);// 〇〇歳と出力される

こんな感じですね！

従来も別の書き方を用いて、同じような挙動のものは書けたと思いますが、オプショナルチェーンのときと同様、こちらのほうがスッキリと書くことができますね。

|| （論理OR演算子）との違いについて

似たような挙動をするものに論理OR演算子があります。これは、右側がfalthyの場合に右側を返すというものです。Null合体演算子と重複するような挙動でもありますが、右側がfalthyというのはnullやundefinedの他にも、false,0,'',Nanなどがあります。

Null合体演算子はデフォルト値をセットしたい時に使うと良いようです。

const family = {
    baby: {
        age: 0,
        ...
    },
    ...
};

const babyAge = family?.baby?.age ?? "〇〇";
console.log(`${babyAge}歳`); // 0歳

const babyAge2 = family?.baby?.age || "〇〇";
console.log(`${babyAgew}歳`); // 〇〇歳

このように出力の違いが出てきます。これは実装の際に上手く活用すると良いです！（私は上手く活用できそうではありません笑）