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.