ESNext: JavaScript “Nullish Coalescing Operator”

One of my favorite ECMAScript Proposals is the “Optional Chaining Operator”. Another proposal that forms great duo with it is the “Nullish Coalescing Operator” (sometimes also referred to as “Nullary Coalescing Operator”).

Both proposals still are Stage-1, but don’t let that stop us from taking a peek into it right now.

❓ Stage-1?
The TC39 Committee has a 5 stage process in place, ranging from stage-0 to stage-4, by which it develops a new language feature. Stage-1 is the proposal phase.


The problem

As explained in the “Optional Chaining Operator” post we can get properties of an object in a fail safe way using Short-Circuit Logic or by using the proposed Optional Chaining operator (?.) in the nearby future:

// Today: Extract firstName using Short-Circuit Logic
const firstName = message.body && message.body.user && message.body.user.firstName;
// Near future: Extract firstName using the Optional Chaining Operator
const firstName = message.body?.user?.firstName;

A common technique used is to add a default fallback value using the logical OR operator (||):

const firstName = message.body?.user?.firstName || 'Stranger';

Whilst this works fine, there is one problem with falsy values: when the left hand side of the OR expression evaluates to falsy (e.g. null, undefined, false, 0, empty string, …), the right hand side of the expression will be used. For nulland undefined that’s not a problem, but it is for false, 0, empty string, etc.:

const message = {
settings: {
animationDuration: 0,
showSplashScreen: false
},
};

const showSplashScreen = message.settings?.showSplashScreen || true;
// --> true 🚫

The result here is true (the fallback), even though message.settings.showSplashScreenwas defined to be false.


The solution

The proposed Nullish Coalescing Operator ?? is intended to provide a solution to this problem. It serves as an equality check against nullary values (e.g.
null or undefined). Whenever the expression to the left of the ?? operator evaluates to either undefined or null, the value defined to the right will be returned.

Combined with the Optional Chaining Operator, our code snipped can be fixed like this:

const message = {
settings: {
animationDuration: 0,
showSplashScreen: false
},
};

const showSplashScreen = message.settings?.showSplashScreen ?? true;
// --> false 🎉

Small change, big impact 🙂


So, when can we us this?

You can use the Nullish Coalescing Operator today already thanks to Babel’s plugin-proposal-nullish-coalescing-operator plugin (for use with Babel 7).

Do note that the proposal still Stage-1 (soon Stage-2 by the looks of it) and might still change in the future.

In Short

💻 The examples embedded in this post are part of a talk on ESNext named “What’s next for JavaScript?”, which I recently gave at a Fronteers België meetup. I’m currently still in the process of preparing the slides for publication. I’m available for bringing this talk at your meetup/conference.

💡 This post first appeared on my blog bram.us. You can follow it via RSS, Twitter, and Facebook.

📚 Other posts in this series include:
JavaScript: What’s new in ECMAScript 2018 (ES2018)?
ESNext: JavaScript “Optional Chaining Operator”

Like what you read? Give Bramus! a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.