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!
Top comments (0)