はじめに

みなさん、こんにちは torihaziです！

台風強くて家が飛びそうです。

今回はタイトルのことについてなんとなく使っていたので

これを機に"使い分けられる"ようにしていこうと思います！！

結論

Falsyな値全部外したい時は ||

nullとかundefinedだけ外したいときは??

どう言うことか

|| (論理OR演算子)

false, 0, ''（空文字列）, null, undefined, NaNを falsy として扱います。

左辺が falsy な値の場合、右辺の値を返します。

?? (Nullish合体演算子)

nullとundefinedのみを falsy として扱います。

左辺がnullまたはundefinedの場合のみ、右辺の値を返します。

// || の例
console.log(false || 'デフォルト値');   // 'デフォルト値'
console.log(0 || 'デフォルト値');       // 'デフォルト値'
console.log('' || 'デフォルト値');      // 'デフォルト値'
console.log(null || 'デフォルト値');    // 'デフォルト値'
console.log(undefined || 'デフォルト値'); // 'デフォルト値'

// ?? の例
console.log(false ?? 'デフォルト値');   // false
console.log(0 ?? 'デフォルト値');       // 0
console.log('' ?? 'デフォルト値');      // ''
console.log(null ?? 'デフォルト値');    // 'デフォルト値'
console.log(undefined ?? 'デフォルト値'); // 'デフォルト値'

と言うことです！

例えば

function getUserInput(input) {
  // ユーザーが意図的に0や空文字列を入力する可能性がある場合
  return input ?? 'デフォルト値';
}

console.log(getUserInput(0));  // 0
console.log(getUserInput(''));  // ''
console.log(getUserInput(null));  // 'デフォルト値'