8 New Features Shipping With ES2020

GlobalThis, optional chaining, private fields in classes, the nullish coalescing operator, and more

Thomas Guibert
Mar 10 · 6 min read
Photo by Tomasz Frankowski on Unsplash

As you might know, since ES6 in 2015, a new version of ECMAScript is released each year, by Ecma International’s TC39. ECMAScript 2020 is the 11th edition of the ECMAScript Language Specification.

This new iteration comes with its own batch of new features — let’s review them!


1. ‘globalThis’

The JavaScript language is quite popular now and can be used in a wide variety of environments — in web browsers, of course, but JavaScript can also be run server-side, on smartphones, robotically, etc.

Each environment comes with its own object model and syntax to access the global object. Because of that, it can be tough to write JavaScript code that works in multiple environments:

It is, of course, possible to standardize it across multiple platforms by writing a function that checks for the current environment, but this won’t be needed anymore!

The property is now the standard way of accessing the global object — across environments — in a consistent manner.


2. ‘Promise.allSettled()’

The method returns a promise that resolves after all of the given promises have either resolved or been rejected, with an array of objects that each describe the outcome of each promise via the status property. This makes it easier to filter them.


3. The Nullish Coalescing Operator

The nullish coalescing operator is a new tool in your toolbox when trying to provide a default value when performing property accesses. It differs from the or operator, symbolized with between two values, in the manner that it treats nullary values.

Let’s see it in action by comparing the two operators:

As you can see, the nullish coalsceing operator only picks the right-hand side value if and only if the expression at the left-hand side of the is either or .


4. Private Field in a Class

By default, in JavaScript, everything is accessible from outside the class. This proposal brings a new way of declaring a property — in a class — to make sure it’s not accessible from outside.

By prefixing the name of the property with a , you indicate this field is private and won’t be exposed to the outside world. Here’s an example:


5. The Optional Chaining Operator

Until now, when looking for a property value that’s deeply nested inside an object or using an API that returns either an object or null/undefined, one often has to proceed this way to check for intermediate values:

The optional chaining operator allows us to handle many of those cases in a handier way. Rewriting the examples above would give:

Good to know

The optional chaining operator is short-circuiting, which means it stops to evaluate the line if the left-hand side of evaluates to null or undefined:

Last thing: The optional chaining operator also works with functions.


6. ‘BigInt’

We already have to represent numbers in JavaScript. Problem is, the biggest number is 2⁵³. Above that, it’s not really reliable anymore.

You got it: is a new primitive to provide a way to represent a number larger than 2 ⁵³. It’s created by appending an to the end of an integer:

Good to know

A mostly has the same behavior as a , but they can’t be used together in an operation:

A can be converted to a using the constructor , but in certain cases, you might be losing the precision. For this reason, it’s recommended to only use when large values are expected in your code.


7. ‘dynamic import()’

The current form of importing modules is static and only accepts a string literal. It also only works at preruntime as a linking process.

The dynamic allows developers to be able to dynamically load parts of a JavaScript application at runtime. This comes with multiple advantages the current doesn’t support:

  • Load user’s language instead of loading them all
  • Lazy loading of routes of your application (improving performance)
  • Can handle failure if the module isn’t found

How does it work?

Here are the notable differences, compared to the usual declaration:

  • can be used from scripts, not just from modules
  • can occur anywhere at any level, and isn’t hoisted
  • accepts arbitrary strings (with runtime-determined template strings, as shown here), not just static string literals

8. ‘String.protype.matchAll’

The method returns an iterator of all the results matching a string against a regular expression () and work this way:

Good to know

While the method doesn’t return capture groups when used with the global flag, does.


Conclusion

That’s all for this year!

Babel already has plugins for almost all of these features. If you can’t wait to use them in your projects, here are the links:

Thanks for reading!

Better Programming

Advice for programmers.

Thanks to Zack Shapiro

Thomas Guibert

Written by

Full Stack Javascript Developer, in ❤️ with TypeScript and GraphQL. Sharing my knowledge one piece at a time…

Better Programming

Advice for programmers.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade