【Javascript】Nullish Coalescing Operator(??)合体演算子を試してみる

初めに

合体演算子について学習した内容をまとめてみました。

前回の記事：

https://qiita.com/redrabbit1104/items/e002b51e109e120ed6d4
https://qiita.com/redrabbit1104/items/e9b687c6c6d13fbf7c2a

※内容に間違いなどがある場合はご指摘をよろしくお願いします。

Nullish Coalescing Operator(Null合体演算子）

論理演算子。nullish（nullに近いもの）をcoalescing(合体させた）operator(演算子）のこと。ここでnullishとは「null」と「undefined」を意味します。この「null」と「undefined」を合体させたケース（nullまたはundefinedの場合)を探して、もしその値があれば評価せず、それ以外の値は評価する演算子です。

使ってみる

まずは、falsy values（NaN,false,0n,'',null,undefined)の場合、結果はどうなるか試してみました。

    let numFruits = NaN;
    console.log(numFruits ?? 10);
    //NaN

    numFruits = false;
    console.log(numFruits ?? 10);
    //false

    numFruits = 0n;
    console.log(numFruits ?? 10);
    //0n

    numFruits = '';
    console.log(numFruits ?? 10);
    //

    numFruits = null;
    console.log(numFruits ?? 10);
    //10

    numFruits = undefined;
    console.log(numFruits ?? 10);
    //10

nullとundefinedを除いたその他のfalsy values(NaN,false....など）は全て評価され処理が終わります。falsy valuesを探しにいく「&&演算子」と似ています。

    let numFruits = NaN;
    console.log(numFruits && 10);
    //NaN

    numFruits = false;
    console.log(numFruits && 10);
    //false

    numFruits = 0n;
    console.log(numFruits && 10);
    //0n

    numFruits = '';
    console.log(numFruits && 10);
    //

    numFruits = null;
    console.log(numFruits && 10);
    //null  <---ここが違う(??演算子の場合10）

    numFruits = undefined;
    console.log(numFruits && 10);
    //undefined  <---ここが違う(??演算子の場合10）

なぜ使うのか

parkというオブジェクトに木の数が格納されているnumTreesの値を調べる場合、or演算子を使ってtruthy valuesの場合にはその値を表示させ、それ以外の場合にはdefault値を表示させたい時を考えてみました。

 const park = {
      numTrees: 0,
    }

    const trees = park.numTrees || 10;

木の数が0なので0の値を表示してほしいですが…

結果はの10です。これは望んでいた結果とは違いますね。
それでnull合体演算子(??)を使ってみました。

 const park = {
      numTrees: 0,
    }

    const trees = park.numTrees ?? 10;
    console.log(trees);

コンソールを確認してみると、

0という値が表示されました。

まとめ

null合体演算子(??)は「nullとundefined」以外のfalsy valuesを探しにいき、その値が見つかればShort-Circuitが起こり処理（短絡評価）が終わる。 ||演算子で0が評価されない問題を解決してくれる便利な演算子。

　参考サイト

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
https://qiita.com/HelloRusk/items/ac116f29cceb3899ec01