JavaScript Features in ES2020 - JavaScript's Null Coalescing Operator

This year ECMAScript 2020 (ES2020) will be released! Since ECMAScript 2015 (ES6) was released in 2015, we have gotten yearly updates to the JavaScript language.

Using JavaScript Null Coalescing Operator
Chaining JavaScript’s Null Coalescing Operator
Real World Use
Null Coalescing Operator vs Logical Or ||
Browser Support
Conclusion

In ES2020, we are getting a feature that has been available in other languages like C# and PHP: null coalescing operator. I’ve always liked the name because it makes me feel smart whenever I say it. 🤓

The null coalescing operator will go through a list and return the first item that is not null or undefined.

It is important to note that the null coalescing operator only looks for null or undefined values. Falsy values are accepted by the null coalescing operator.

JavaScript's Null Coalescing Operator

Using JavaScript Null Coalescing Operator

Let’s look at some examples. Keep in mind that JavaScript’s null coalescing operator will follow the chain of ?? until it finds something that isn’t null or undefined. If it finds something that is false, it will return that.

null      ?? 'hi'       // 'hi'
undefined ?? 'hey'      // 'hey'

false     ?? 'hola'     // false
0         ?? 'bonjour'  // 0
'first'   ?? 'second'   // first

Here’s more examples where we have some values stored in variables:

let person  // <-- person is undefined here

person ?? { name: 'chris' }       // { name: 'chris' }

const isActive = false

isActive ?? true             // false

Chaining JavaScript’s Null Coalescing Operator

The cool thing about the JavaScript’s null coalescing operator is that we can chain it as many times as we need.

null ?? undefined ?? false ?? 'hello'     // false
null ?? '' ?? 'hello'                     // ''

Real World Use

You could use this when grabbing data from external sources. Let’s say we wanted to grab a blog post from multiple places. Then we could determine which post would be our featured one.

// code shortened for brevity. using fetch requires more code than this
const firstBlogPost = await fetch('...')
const secondBlogPost = await fetch('...')
const defaultBlogPost = { title: 'Default Featured Post' }

const featuredBlogPost = firstBlogPost ?? secondBlogPost ?? defaultBlogPost

The above way is a good way to set defaults if the aren’t sure that some values will exist.

Null Coalescing Operator vs Logical Or ||

If you want to dismiss falsy values, you can use the logical or operator (||). We’ve had this for a while in JavaScript.

It essentially does the same thing as the null coalescing operator except it dismisses falsy values.

Null coalescing operator skips null, undefined
Logical or operator skips null, undefined, false

false ?? 'hello'    // false
false || 'hello'    // 'hola'

If you don’t want to use falsy values, then use ||. If you only want want to check if something is null or undefined, use ??.

Browser Support

At the time of this writing, it looks like the latest versions of Chrome, Firefox, Edge, and Safari are good with the nullish coalescing operator.

JavaScript's Null Coalescing Operator

Conclusion

JavaScript’s null coalescing operator is a good addition to the language. It doesn’t hurt to have more options to check values.

Nullish Coalescing Operator | ES2020

#javascript #web-development

Table of Contents