A Gentle Introduction to Nullish Coalescing Operator

A nullish coalescing operator is a logical operator that returns a right-side operand when the left-side operand is null or undefined. Otherwise left side operand is returned.

console.log(false ?? 'A') // false
console.log(0 ?? 'B') // 0
console.log(-0 ?? 'C') // -0
console.log(0n ?? 'D') // 0n
console.log(null ?? 'E') // E
console.log(undefined ?? 'F') // F
console.log(NaN ?? 'G') // NaN
console.log('' ?? 'H') // ''

This varies from the logical OR || operator, which returns right-side operand when the left operand is any falsy value; not only null or undefined.

console.log(false || 'A') // A
console.log(0 || 'B') // B
console.log(-0 || 'C') // C
console.log(0n || 'D') // D
console.log(null || 'E') // E
console.log(undefined || 'F') // F
console.log(NaN || 'G') // G
console.log('' || 'H') // H

The logical OR operator is better suited to provide some default value rather than passing falsy value. On the other hand, if you care only about null and undefined (ignoring other falsy values), nullish coalescing operator is the way to go!

The right-side operand is NOT evaluated if the left-side is other than null or undefined.

const foo = () => {
  console.log('foo was called')

  return undefined
}

const bar = () => {
  console.log('bar was called')

  return null
}

const baz = () => {
  console.log('baz was called')

  return false
}

console.log(foo() ?? baz())
// LOGS:
// foo was called (evaluated foo function)
// baz was called (evaluated baz function)
// false (returned baz function)

console.log(bar() ?? baz())
// LOGS:
// bar was called
// baz was called (evaluated baz function)
// false (returned baz function)

console.log(baz() ?? bar())
// LOGS:
// baz was called (evaluated baz function)
// false (returned baz function)

Share this post on Twitter