What’s new in JavaScript ES2020

Jemesh Joseph
Jun 10, 2020 · 5 min read
What’s new in JavaScript ES2020?

What’s up folks! JavaScript, an awesome programming language has been evolving. We are happy to hear the good news that ECMAScript 2020 (commonly known as ES2020) features are now finalized by the TC39 committee.

Let’s see some interesting features in new JavaScript.

BigInt

BigInt is a built-in object that provides a way to represent whole numbers larger than pow(2,53)-1, which is the largest number JavaScript can reliably represent with the Number primitive and represented by the Number.MAX_SAFE_INTEGER constant. A is created by appending to the end of an integer literal or by calling the function .

BigInt example image, What’s new in JavaScript ES2020

However we can represent very large numbers using BigInt, there are some limitations when BigInt type is used with regular numbers. It cannot be used with methods in the built-in object and cannot be mixed with instances of in operations. They must be used with the same type.

BigInt is not backwards compatible with IEEE754 standards because this number system cannot support very large numbers.

Optional Chaining

This is one of the exciting feature that can make your JavaScript code look more clear. The optional chaining is an error-proof way to access nested object properties, even if an intermediate property doesn’t exist. Is it sounds interesting? This feature should save writing so many lines of code for checking property existence in each level of deeply nested object.

Let’s see how we can do this is our code.

Optional Chaining example, What’s new in JavaScript ES2020

When you want to reach a property of an object, usually you can use operator to avoid getting errors when the object is null or undefined.

With this new JavaScript feature this syntax become better and more clear than the one above. You can just use instead of adding operator for each level of the tree.

The optional chaining stops the evaluation and returns if the part before is or .

Optional Chaining example 2, What’s new in JavaScript ES2020
Optional Chaining example 2, What’s new in JavaScript ES2020

Let’s start implementing this feature in our code and reduce the long lines of conditional checking.

Nullish Coalescing

There are some situations while coding, where you have to check for null or undefined values instead of falsey values. In JavaScript, falsey values can be like empty strings, the number 0, , , , etc. Nullish coalescing operator adds the ability to check for values instead of values.

Let’s see how this works.

Nullish coalescing example, What’s new in JavaScript ES2020

Looking at this we can simply say Nullish Coalescing operator () is a logical operator that returns its right-hand side operand when its left-hand side operand is or , and otherwise returns its left-hand side operand.

Contrary to the logical OR () operator, the left operand is returned if it is a falsey value which is not or . See below for example.

Nullish Coalescing example, What’s new in JavaScript ES2020
Nullish Coalescing example, What’s new in JavaScript ES2020

Looking at the above example, OR operator always returns a truthy value, whereas the nullish coalescing operator returns a defined value.

Dynamic Import

The feature name is straight forward, that it provides the ability to import the JavaScript files dynamically as modules in your application. This is just like how you do it with Webpack and Babel at the moment.

This feature will help you ship on-demand-request code, without the overhead of Webpack or other module bundlers. This is known as code splitting, as the code is delivered in smaller bundles as required.

Look at the below example to understand how we dynamically import module.

Dynamic Import example, What’s new in JavaScript ES2020
Dynamic Import example, What’s new in JavaScript ES2020

Here the module is lazy loaded only when it is needed. This reduces the initial page load times of our application. It also prevents unnecessary module load in every page visit sessions even if the user uses the module feature or not.

Static and dynamic are both useful. Each have their own, very distinct, use cases. Use static s for initial paint dependencies, especially for above-the-fold content. In other cases, consider loading dependencies on-demand with dynamic .

Promise.allSettled

The method returns a promise that resolves after all of the given promises have either fulfilled or rejected, with an array of objects that each describes the outcome of each promise.

just waits for all promises to settle, regardless of the result. The resulting array has:

  • for successful responses,
  • for errors.

For each outcome object, a string is present. If the status is , then a is present. If the status is , then a is present. The value (or reason) reflects what value each promise was fulfilled (or rejected) with.

Let’s see the code for better understanding.

What’s new in JavaScript ES2020, Promise.allSettled example
What’s new in JavaScript ES2020, Promise.allSettled example

returns a object that has resolved to an array of objects that describes the outcome of each promise. The response array will be like the below format.

What’s new in JavaScript ES2020, Promise.allSettled example
What’s new in JavaScript ES2020, Promise.allSettled example

returns the results from all your promises in the input promises array even if some of the promises are rejected. This is what it differentiates from .

asynchronously rejects with the value of the promise that rejected, whether or not the other promises have resolved and it fulfills when all of the promises passed as an iterable have been fulfilled.

globalThis

Accessing the global property in JavaScript has always created some difficulty. This is because different platforms have different ways to access it.

  • Client-side JavaScript uses or
  • Node.js uses
  • Web workers use

A new object called gives you cross-platform access to the global object in JavaScript.

String.prototype.matchAll()

method returns an iterator of all results matching a string against a regular expression, including capturing groups. For more info click here.

So you have read the ES2020 features in JavaScript. Use these new features and do some magic in your code.

Evolution of JavaScript is superb since 2015. It is amazing to use these new features that are great regarding code optimization and simplicity. I’m feeling excited about the future of JavaScript and Web development.

Happy Coding!

The Startup

Get smarter at building your thing. Join The Startup’s +724K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store