ES2020: Nullish Coalescing with Babel Plugins

Photo by Vincent Botta on Unsplash

Also published @ CatStache.io

Moving into 2020, a lot of developers have been focusing on what ECMAScript 2020 (ES2020) has to offer! This is a short tutorial on how to take advantage of the the Nullish Coalescing operator ?? which is specified in this GitHub Repository: Nullish Coalescing for JavaScript

Getting and Adding The Plugin

If you already have babel configured in your workflow, it is as easy as installing the proposal plugin for babel (if you don't, check out part 1 of this series!)

npm i --save-dev @babel/plugin-proposal-nullish-coalescing-operator

and then updating your babel.rc plugin with the plugin you just installed!

{
  ...,
  "plugins": [..., "@babel/plugin-proposal-nullish-coalescing-operator"]
}

That is all that you should need to be able to use the new operator ?? and compile to compatible code for the browser!

Babel will parse, transform , and then print the code back out as the final output. By default, the transform phase doesn't do anything! This is where the plugins come into play - generally you can get away with just using @babel/preset-env to use the latest and greatest JavaScript. *However, when you want to use the true bleeding edge like Nullish Coalescing you will need to seek out a specific plugin to use, like in this tutorial.

Simple ?? Example

The basics of nullish coalescing is allowing for sane defaults when a value is either null or undefined. The old way people would check for existence and then going to a default was using the or operator: let displayname = username || "User Profile"; where this would check for the existence of username and if not found default to the string "User Profile".

The problem with this old way was that something like an empty string "" is coerced into being falsey in this expression! The ?? operator only utilize the default for null or undefined. Here is a quick example - this code:

const logUsername = username => {
    let displayname = username ?? "User Profile";
    console.log(displayname);
}

const oldLogUsername = username => {
    let displayname = username || "User Profile";
    console.log(displayname);
}

console.log("New logging of username: ");
logUsername(null);
logUsername("");
logUsername("bamartindev");

console.log("\nOld logging of username: ");
oldLogUsername(null);
oldLogUsername("");
oldLogUsername("bamartindev");

will compile to:

"use strict";

const logUsername = username => {
  let displayname = username !== null && username !== void 0 ? username : "User Profile";
  console.log(displayname);
};

const oldLogUsername = username => {
  let displayname = username || "User Profile";
  console.log(displayname);
};

console.log("New logging of username: ");
logUsername(null);
logUsername("");
logUsername("bamartindev");
console.log("\nOld logging of username: ");
oldLogUsername(null);
oldLogUsername("");
oldLogUsername("bamartindev");

and the following will be output:

New logging of username:
User Profile

bamartindev

Old logging of username:
User Profile
User Profile
bamartindev

Notice that this is the replacement for ??:

let displayname = username !== null && username !== void 0 ? username : "User Profile";

So, in theory we could also write logUsername(void 0); and get our output of "User Profile", but I am not sure when that might happen 😉

The End

This concludes this small tutorial on adding a plugin to your babel configuration and and why you might need to do that in the future!

If you see any issues with this post, please let me know so I can make edits and give you a shout out!