Nullish Coalescing can be a massive addition to your toolbox as a developer. It will allow for shorter, more concise code and, in many cases, more readable code, as we will see by going through a few examples below.

What is Nullish Coalescing?

Some of you may be wondering what exactly is Nullish Coalescing. It’s actually not nearly as intimidating as it seems. The idea behind it (as it applies in JavaScript) is that it will allow you to assign a fallback value to things if they are undefined or null.

“Nullish Coalescing” statements can be written in JavaScript by using an operator that looks like this.??

Here is an example of what it looks like for some context:

Now let’s get into some different examples and use cases for “Nullish Coalescing.”

Examples

I will show you three examples in which we will utilize “Nullish Coalescing.” These examples will solve the same problem I explained above (creating meaningful default values). Still, they will approach it slightly differently due to how you would manipulate the data.

Scenario 1: Nullish Coalescing with a Basic Undefined or Null Value

Looking at the above code, here is what is happening. On line 7, where we use nullish coalescing, we are saying, valueToBeDisplayed will either equal value which is set on line 3, or on the off chance that value is null or undefined, valueToBeDisplayed will equal “this value doesn’t exist.”

Scenario 2: Nullish Coalescing with Optional Chaining

Before diving into the code, I would like to explain what optional chaining (the “?” operator) does. When looking at an object, if you put “?” before “.” it says if I cannot find this value, I will return undefined. The “?” is essential because, without it, we will get a JavaScript error that looks something like this (when user is undefined):

Uncaught TypeError: Cannot read properties of undefined (reading 'userName')

Looking at the above code, let’s see what line 12 is actually doing. Knowing what we now know about optional chaining, we will either get a value or undefined. In our case, based on how I wrote the code, we will get undefined, and with the ?? operator, we will then assign userNameToDisplay to “anonymous user.”

Scenario 3: Using the Nullish Assignment Operator

Just to preface what we are about to look at, the “nullish assignment operator” is slightly different from the “nullish coalescing operator”. As its name may imply, if a value is “Nullish”, it will assign it a value. Its syntax looks like this:

With that explanation out of the way, let’s look at a more “real world” example. “Nullish Assignment” can be helpful in “massaging data” that you know may be undefined or null coming back from an API.

Let’s take a look at what the above code is doing. In essence, what line 8 is saying is that when the userName doesn’t exist, assign it a value of “anonymous user.”

Conclusion

“Nullish Coalescing” can be a powerful tool for writing concise and easy-to-read code. It saves us from performing if checks and ternary operations. It also removes duplicative code when it comes to assignment, thanks to the use of the “Nullish Assignment Operator.”

Hopefully, you found this article helpful, and as always, if you have any questions, feel free to ask.

Build component-driven. It’s better, faster, and more scalable.

Forget about monolithic apps, start building component-driven software. Build better software from independent components and compose them into infinite features and apps.

OSS Tools like Bit offer a great developer experience for building component-driven. Start small and scale with many apps, design systems or even Micro Frontends. Give it a try →