Published on

Nullish Coalescing Operator in JavaScript

664 words4 min read
  • avatar
    Curtis Warcup

Introduced in ES2020, the nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

This is a logical operator, meaning that it returns either true or false.

It is different from the logical OR (||) operator, which returns the first truthy value.


const foo = null ?? 'default string'

// expected output: "default string"
const foo = 0 ?? 42

// expected output: 0

The || can create some issues if your left value is falsy, like 0 or ''.

const foo = 0 || 42
console.log(foo) // 42

const bar = 0 ?? 42
console.log(bar) // 0

Unlike ||, ?? does not return the first truthy value. It only returns the right value if the left value is null or undefined.

const foo = '' || 'default string'
console.log(foo) // 'default string'

const bar = '' ?? 'default string'
console.log(bar) // ''

const baz = undefined ?? 'default string'
console.log(baz) // 'default string'

Use Cases

The nullish coalescing operator is useful when you want to return a default value if a variable is null or undefined.

const [result, setResult] = useState(null)

useEffect(() => {
    .then((response) => response.json())
    .then((json) => setResult(json))
}, [])

return <div>{result ?? 'Loading...'}</div>

In this example, we are fetching data from an API. If the data is not yet loaded, we want to display a loading message.

This can also be useful when using React and TypeScript. For example, take this type:

type User = {
  name: string
  happy: boolean | null

export const User = ({ user }: { user: User }) => {
  return (
      {user.happy ?? 'Unknown'}

In this example, we are displaying a user's name and whether or not they are happy. If the user's happiness is null, we want to display Unknown. This satisfies the type checker, because null is a valid value for boolean | null.