How is the nullish coalescing operator (??) different from the logical OR operator (||) in ECMAScript?

Question

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?

Answer 1

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.

Answer 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.