Mike Bifulco
BlogWorkAboutNewsletter

JavaScript Tips: Nullish Coalescing (??)

Let's take a look at the Nullish Coalescing operator (??) in JavaScript, which returns the right operand if the left is null or undefined.

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.

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(), 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:

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:

// 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 announcement in mid 2021.

Data on support for the mdn-javascript__operators__nullish_coalescing feature across the major browsers from caniuse.com

Additional Reading

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

Mike Bifulco headshot

Get content for developers, designers, and entrepreneurs

Subscribe to get my updates delivered to your inbox. Typically 1-2 emails a month, straight from me to you. 😘 Unsubscribe anytime.

More great resources

Articles for developersArticles for JavaScript developersArticles about CSSArticles about User Experience (UX)Articles about tools I useArticles about productivityArticles about GatsbyBrowse all topics →
© 2019-2022 Mike Bifulco
Built with Next. Source code on GitHub.
Disclaimer: 👋🏽 Hi there. I work as a Developer Advocate at Stripe. Content on this site contains my own opinions, and does not necessarily reflect the views of my employer.