New feature of ES2020

Tram Ho

Hello everyone, 2020 is here and let’s find out the latest things earlier this year.

That new version of ECMAScript has been released! Good news for ECMAScript lovers. In the previous version of ECMAScript , many interesting features and useful functions were added. What do we expect this time? Let me check it out.


The matchAll () method returns the result of a string with a regular expression, including capturing groups. Take a look at the example below to get a better picture:

Browser support:

  • Chrome: 73
  • Firefox: 67
  • Opera: 60

Dynamic Import

Now, you can import a file dynamically.

Previously we used like this:

But now, we can import a file dynamically. And JavaScript reads the modules in the file and brings them into the code where they are called.

Dynamic import returns a promise. Meaning you can write it this way.

Browser support:

  • Chrome: 63
  • Firefox: 67
  • Opera: 50
  • Safari: 11.1


When you have to multiply two numbers that are so big that they cause overflow, do we have a fix?

The answer is yes, to BigInt it is a savior for us in this case.

To use BigInt by calling BigInt () with parentheses or 2n with ‘n’ at the end of Number .

You can also multiply, read, multiply and subtract it.

There is a small note, for bigN / 3n returns 3n rather than 3.33333n. Because as you realize from its name, it only handles integers. So bigN / 3n is similar to Math.floor(10/3)

Unfortunately, you cannot use BigInt with float nor can you use BigInt and Number together.

Instead, they will be usable in the case of comparison.

And a BigInt can be evaluated as Number if it is conditional.

Browser support:

  • Chrome: 67
  • Firefox: 68
  • Opera: 54


Promise.allSettled quite similar to Promise.all , but there are differences between them. It is Promise.all waiting for all promises to be fulfilled or rejected. And Promise.allSettled did not care about that. What it cares about is that all promises have been fulfilled, regardless of their status. So every input promise can be fulfilled or rejected, but that’s not important to Promise.allSettled . Just all of them were done.

This can be quite helpful when you want to do something before performing some action, for example, taking all the necessary data before the user sees the list page. But users may also see empty items because the action may be corrupted.

Browser support:

  • Chrome: 76
  • Firefox: 71


globalThis refers to the context you are in. If you’re at Browsers , globalThis will be this , if you’re at Node globalThis will be global. Therefore you do not need to think about various environmental issues anymore.

And this is how it works, but don’t use it in your code.

Browser support:

  • Chrome: 71
  • Firefox: 65
  • Safari: 12.1
  • Node: 12


There are quite a few interesting new features in ES2020 in addition to the features I have shared, including for-in mechanics , Optional Chaining , Nullish coalescing Operator . However, most of them do not support older browsers and they are unstable in all environments. Therefore, you should consider the environments that support that feature.

Thank you everyone for reading my share!

Reference: in-simple-examples-1513

Share the news now

Source : Viblo