21

ES2020 introduced the nullish coalescing operator (??) which returns the right operand if the left operand is null or undefined. This functionality is similar to the logical OR operator (||). For example, the below expressions return the same results.

const a = undefined
const b = "B"

const orOperator = a || b
const nullishOperator = a ?? b
  
console.log({ orOperator, nullishOperator })

result:

{
    orOperator:"B",
    nullishOperator:"B"
}

So how is the nullish operator different and what is its use case?

FZs
  • 16,581
  • 13
  • 41
  • 50
francis
  • 3,852
  • 1
  • 28
  • 30
  • 3
    One difference is the way it handles `false` – Matt Nov 26 '20 at 13:00
  • `a || b === a ? a : b` , `a ?? b === a != null ? a : b` – Felix Kling Nov 26 '20 at 13:55
  • 1
    One doesn't have to look further than the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator). – Felix Kling Nov 26 '20 at 13:56
  • 2
    *"For example, the below expressions return the same results."* You can find lots of examples where specific values produce the same results with different operators. E.g. `0 + 0`, `0 - 0`, `0 * 0` all produce `0`, yet I hope no one would argue that those operators do different things. If you want to understand the difference between operators, looking at a single example is not enough. – Felix Kling Nov 26 '20 at 13:58

2 Answers2

40

The || operator evaluates to the right-hand side if and only if the left-hand side is a falsy value.

The ?? operator (null coalescing) evaluates to the right-hand side if and only if the left-hand side is either null or undefined.

false, 0, NaN, "" (empty string) are for example considered falsy, but maybe you actually want those values. In that case, the ?? operator is the right operator to use.

Audwin Oyong
  • 2,247
  • 3
  • 15
  • 32
Phillip
  • 6,033
  • 3
  • 24
  • 34
-2

If you are intended to provide a default value to a number that may potentially be NaN, do this:

a = a || 0

// Not this
// a = a ?? 0

Also see convert NaN to zero.

Explanation:

Both operators are common for providing a default value for a variable. A situation for handling possible NaN value may mark some difference:

let userAge = null

let age1 = userAge || 21
let age2 = userAge ?? 21
console.log(age1) // 21
console.log(age2) // 21

let userAge = parseFloat(null)

let age1 = userAge || 21
let age2 = userAge ?? 21
console.log(age1) // 21
console.log(age2) // NaN

If you wish to let a value with possible NaN value fall back to a default value, choose ||. Double question mark aka the nullish operator ?? doesn't do the fallback here.

tinystone
  • 369
  • 3
  • 6