JavaScript Tips: Nullish Coalescing (??)
Tags: javascript, webdev, programming, react
Published: 2021-11-15 16:54:56

---
title: JavaScript Tips: Nullish Coalescing (??)
published: true
date: 2021-11-15 00:00:00 UTC
tags: javascript, webdev, programming, react
cover_image: https://res.cloudinary.com/mikebifulco-com/image/upload/f_auto,q_auto/v1/posts/nullish-coalescing-javascript/cover.webp
canonical_url: https://mikebifulco.com/posts/nullish-coalescing-javascript
series: JavaScript Tips
---


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

![Data on support for the mdn-javascript__operators__nullish_coalescing feature across the major browsers from caniuse.com](https://caniuse.bitsofco.de/static/v1/mdn-javascript__operators__nullish_coalescing-1636908973156.jpg)

## Additional Reading

If you found this useful, you might also want to check out some of my other JavaScript tips:

- [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)

And if you _really_ enjoyed this, I'd love it if you subscribed to my [newsletter](https://mikebifulco.com/newsletter), to get occasional nuggets of dev and design wisdom straight from my brain to your inbox.