論理和(||)とNull合体(??)の違いをみる

2021-07-31

概要

JavaScriptではfalse判定が特徴的です。
その判定を行う際に出てくる論理演算子、ここでは 論理和(||)とNull合体(??) の違いをまとめてみます。

論理和(||)

左辺の値 が true に変換できる場合は 左辺の値 を返し、それ以外の場合は 右辺の値 を返します。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_OR

解説にもありますが、falseに変換されうる式の例が以下の通りになります。

  • null
  • NaN
  • 0
  • 空文字列
  • undefined

Null合体

左辺が null または undefined の場合に右の値を返し、それ以外の場合に左の値を返します。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

検証

上記の説明を踏まえて、falsy判定の検証をしてみましょう。
以下がサンプルコードになります。

const falsyValues = ['', 0, NaN, null, undefined]

// 論理和(||)
for (let i = 0; i < falsyValues.length; i++) {
  const result = falsyValues[i] || 'falsy'
  console.log(`${falsyValues[i]}: ${result}`)
}
// ': falsy'
// '0: falsy'
// 'NaN: falsy'
// 'null: falsy'
// 'undefined: falsy'

// Null合体(??)
for (let i = 0; i < falsyValues.length; i++) {
  const result = falsyValues[i] ?? 'falsy'
  console.log(`${falsyValues[i]}: ${result}`)
}
// ': '
// '0: 0'
// 'NaN: NaN'
// 'null: falsy'
// 'undefined: falsy'

二つの違いは、 falsyとみなす値 です。

論理和(||)では、JavaScriptが判断するfalse判定です。
Null合体では、Nullとundefinedのみをfalsyとみなします。 つまり、'', NaN, 0はfalsyでないと判断します。

どちらを使用するべきか

これはNull合体をお勧めします。

例えば0を正しく値として判断させたい時です。

const reportingValue = (value) => {
  console.log(value || '記録がありません')
  // '記録がありません'
  console.log(value ?? '記録がありません')
  // 0
}

reportingValue(0)

論理和(||)では0をfalsyとみなすので、記録がありません、とログが出てしまいます。 一方、Null合体では正確に数値として扱えています。

というよりも、0や空文字、NaNなどは別のメソッドで判別されるべきと考えています。

結論

JavaScriptのfalse判定はかなり特殊です。
先述した通り、Null合体の方が防げる事例もあります。

使用するには意識して使い分けする必要があります。

運営について

Natural Tearoomはシステム開発会社フロントエンドエンジニアがんちゃんが運営するメディアです。
フロントエンド技術を中心に発信しています。

· プライバシーポリシー

SNS

© 2021 天然珈琲店