BlogPodcastAbout💌 Tiny Improvements

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

Additional Reading

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

Mike Bifulco headshot

Subscribe to Tiny Improvements

Learn about designing & building great products for the web, and my philosophy for living a life you love in an ever-changing world.

Typically once a week, straight from me to you. 😘 Unsubscribe anytime.

Interested in sponsoring? → Click here

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.

© 2019-2022 Mike Bifulco

Interested in sponsoring? → Click here

Disclaimer: 👋🏽 Hi there. I work as a Product Builder at [Incognito Mode]. These are my opinions, and not necessarily the views of my employer.
Built with Next. Source code on GitHub.

More great resources

Articles about React.jsArticles about Remix.runArticles about Next.jsArticles for developersArticles for JavaScript developersArticles about CSSArticles about User Experience (UX)Articles about tools I useArticles about productivityBrowse all topics →