---
title: 'JavaScript Tips: Nullish Coalescing (??)'
date: 2021-11-15
excerpt: 'Let''s take a look at the Nullish Coalescing operator (??) in JavaScript, which returns the right operand if the left is null or undefined.'
tags: [dev, javascript, react]
canonical: https://mikebifulco.com/posts/nullish-coalescing-javascript
---
# JavaScript Tips: Nullish Coalescing (??)

## What does the Nullish Coalescing (`??`) operator do in JavaScript?

JavaScript's Nullish Coalescing operator is two question mark characters next to one another (`??`). It takes a left-hand and right-hand operand, returning the right value *if* the left is `null` or `undefined`. Otherwise, it returns the left value.

```js
let x;

x = 1 ?? 100; // 1
x = null ?? 100; // 100
x = undefined ?? 100; // 100

x = 'Peas' ?? 'Carrots'; // Peas
x = null ?? 'Carrots'; // Carrots
x = undefined ?? 'Carrots'; // Carrots
```

Note that unlike [using Boolean on array.filter()](https://mikebifulco.com/posts/javascript-filter-boolean), there *aren't* special cases to consider here for *truthy* or *falsy* values in Javascript. Nullish Coalescing *only* returns the right value for `Null` and `undefined`, and not for `false` and some other cases, like:

```js
let y;

y = -1 ?? 2; // -1
y = false ?? 2; // false

y = true ?? 2; // true
y = NaN ?? 2; // NaN
y = Infinity ?? 2; // Infinity
y = -Infinity ?? 2; // -Infinity

y = new Date() ?? 'soon'; // [the date object created by new Date()]
```

## Use Nullish Coalescing in React Components

This can be used to simplify what has become a fairly common pattern in React components - checking whether a value is present before rendering it, and providing a fallback if not:

```jsx
// use a ternary operator
const LetterIntro = ({ name }) => {
  return <div>Hi {name ? name : 'there'},</div>;
};

const BetterLetterIntro = ({ name }) => {
  return <div>Hi {name ?? 'there'}</div>;
};
```

Both of these are *valid* syntax, but you might argue that the latter is easier to read, so long as you understand what the `??` operator is doing.

## Make sure to check compatibility on your project

Nullish coalescing is quickly becoming available for use in browsers and JavaScript / Node / Deno, but you should make sure that the project you're working on is using a compatible version of the language before you start to add `??` to all your code.

## Compatibility with Node and Deno

To ensure compatibility with Node, your project must be using **Node version 14.0.0** or later.

To ensure compatibility with Deno, you rproject must be using **Deno version 1.0.0** or later.

## Compatibility with modern browsers

Another thing to condier - as of the writing of this article, Nullish Coalescing isn't available in every web browser quite yet - Internet Explorer and Opera for Android are the two remaining holdouts. I'll leave it to you to decide whether or not that's a showstopper for you - and I don't know if I'd expect to see support in IE *ever* given its [end-of-life](https://docs.microsoft.com/en-us/lifecycle/announcements/internet-explorer-11-end-of-support) announcement in mid 2021.

## More on Nullish Coalescing

My pal Alexander Karan put together a similar tutorial about [The Nullish Coalescing Operator](https://blog.alexanderkaran.com/nullish-coalescing-operator) on his site. It's worth a read - he's a one heck of a smart developer.

## Additional Reading

If you found this useful, you might also want to check out these other articles:

- [Using array.filter(Boolean)](https://mikebifulco.com/posts/javascript-filter-boolean)
- A primer on [deconstructructing objects in JavaScript](https://mikebifulco.com/posts/deconfusing-javascript-destructuring-syntax)
- [Understanding import syntax in Node](https://mikebifulco.com/posts/picking-apart-javascript-import)

## Part of the JavaScript Tips series

- [Understanding JavaScript Destructuring Syntax](https://mikebifulco.com/posts/deconfusing-javascript-destructuring-syntax)
- [JavaScript Tips: Using Array.filter(Boolean)](https://mikebifulco.com/posts/javascript-filter-boolean)

Full series: https://mikebifulco.com/series/javascript-tips

## More from mikebifulco.com

- [What it's like to migrate a high-traffic website from Gatsby to Next.js](https://mikebifulco.com/posts/migrate-gatsby-to-nextjs-apisyouwonthate-com)
- [How to run dependabot locally on your projects](https://mikebifulco.com/posts/run-dependabot-locally)
- [Some things I learned from live coding on Twitch](https://mikebifulco.com/posts/twitch-streaming-software-development-lessons)

---

Written by Mike Bifulco. Originally published at https://mikebifulco.com/posts/nullish-coalescing-javascript