🗼

JavaScriptのtrue/false　〜 ?? と || と、時々、 !! 〜

2024/05/11に公開

💌 前書き

const hoge = fuga ?? 'デフォルトの文字列';

const hoge = fuga || 'デフォルトの文字列';

開発をしていて「なんとなく値が入ってないかもな〜〜〜」って時に上記のように ?? や || を使用していたのですが
正直その時のテンションで使っていたのでこれを機にちゃんと理解する

Null 合体演算子 (??) は論理演算子の一種です。この演算子は左辺が null または undefined の場合に右の値を返し、それ以外の場合に左の値を返します。

つまりこんな感じ

const fuga = undefined;
const hoge = fuga ?? 'デフォルトの文字列'; // 'デフォルトの文字列'

const fuga = null;
const hoge = fuga ?? 'デフォルトの文字列'; // 'デフォルトの文字列'

const fuga = '';
const hoge = fuga ?? 'デフォルトの文字列'; // ''

expr1 || expr2;
expr1 が true に変換できる場合は expr1 を返し、それ以外の場合は expr2 を返します。
false に変換されうる式の例を示します。

null

NaN

0

空文字列 ("" または '' または ``)

undefined

つまりこんな感じ

const fuga = undefined;
const hoge = fuga ?? 'デフォルトの文字列'; // 'デフォルトの文字列'

const fuga = null;
const hoge = fuga ?? 'デフォルトの文字列'; // 'デフォルトの文字列'

const fuga = '';
const hoge = fuga ?? 'デフォルトの文字列'; // 'デフォルトの文字列'

undefinedとnullだけ弾きたい時は ??、0や空文字など偽値も弾きたい時は ||

|| を初めて使うのはif文のOR if (a || b) {} だと思うが、これも同じで

if (undefined || null || '') {
  console.log('hoge');
}

のようにしても hoge はコンソールに表示されない

ここでふと疑問に思った、 if文のORを??に変えれば結果は分かるのか?? と...
というわけでやってみる
先述の通り、??はundefinedとnullだけを弾くので''が存在しているからif文の中に入りそう

if (undefined ?? null ?? '') {
  console.log('hoge');
}

でも、実はこれも hoge はコンソールに表示されない

これはif文の処理が関係しているのであらためて定義を見てみると

if...else 文は、指定された条件が真値ならば文を実行します。条件が偽値なら、オプションの else 節にあるもう一方の文を実行します。

と書いてある
つまり undefined ?? null ?? '' は '' だけど、これが偽値なので条件としてはfalseになる
ということ

if文と似たようなtrue/false処理に二重否定 !! があるが、これも同じ
定義によると

複数の否定演算子を連続して使用することで、明示的にあらゆる値を対応する論理型プリミティブに変換することができます。変換は値の「真値性」または「偽値性」に基づいて行われます (truthy および falsy を参照)。

とのことで console.log(!!(undefined ?? null ?? '')) をすると false が帰ってくるということ