?? の使い方：Nullish Coalescing Operator

??の使い方をずっと勘違いしていた。JavaScriptの「??」、通称ヌリッシュコアレシング（Nullish Coalescing）演算子は、JavaScriptの条件演算子「?:」と似ているが、使い方はだいぶ異なることを知った。

条件演算子「?:」

まずは条件演算子の復習。conditionがtrueなら左側、falseなら右側を返すいつものアレ。

const result = condition ? valueIfTrue : valueIfFalse;

「??」Nullish Coalescing

私が迷ったのは、conditionとvalueIfTrueに同じものが来る場合。
以下のコードが問題ないという覚え方をしてしまっていたため、2回繰り返さなくていいようにするためのshorthandのようなものと勘違いしていた。

const platypus = {
  name: "Peter",
  age: 0
};

const result1 = platypus.name ? platypus.name : "name is undefined";
const result2 = platypus.name ?? "name is undefined";

console.log(result1) // Output: Peter
console.log(result2) // Output: Peter

上記の場合はどちらで書いても結果が同じだが、意味が少し異なることを抑えておく必要がある。

const result1 = platypus.name ? platypus.name : "name is undefined";
// こちらはもし’platypus.name’がtrueなのであれば、’platypus.name’を返す。falseなら"name is undefined"を返すという意味
const result2 = platypus.name ?? "name is undefined";
// こちらはもし’platypus.name’を返すが、もしundefinedまたはnullなのであれば"name is undefined"を返すという意味

大事なポイントは「??」ではundefinedまたはnullの時だけ右辺を返すということ！
例えば以下の可愛いカモノハシの赤ちゃんのage: 0 の例ではOutputが異なる。これは0や””(empty string)がifや「?:」などではfalseと扱われ(Falsy)てnullの側が返ってきてしまうのに対し、「??」では0はundefinedまたはnullではなく、ゼロとしてそのまま扱われるという違いによるもの。

const platypus = {
  name: "Peter",
  age: 0
};

const result3 = platypus.age ? platypus.age : null;
const result4 = platypus.age ?? null;

console.log(result3) // Output: null
console.log(result4) // Output: 0