ES 2020 new features

Posted May 26, 20202 min read

In ES 2020, there are some very useful new features. Next, let's take a look at what new features in the new version can be used in usual development.

Optional chained operator

When people usually write code at work, sometimes they write code like this:

if(a && a. b && a.b.c) {

Because we are not sure whether a or b exists, then getting c will report an error, and this is where the optional chain call is very useful.

We can use the optional chained operator ? ., if there is no value, it returns undefined instead of directly reporting an error, like this:

console.log(a? .b? .c || '');

\ ## Null value merge

The control merge operator is ??, and its role is to return the right operand when the left operand is null or undefined. Let's look at the actual example:

null ?? 7 //7

Some students may ask, what is the difference between this and ||? In fact, the || operator is still necessary, this is the application scenario of the two is different, such as the following situation:

'' ?? 7; //''
'' || 7; //7

In other words, ?? will only take the right value when the left side is null and undefined, and || is the right side value when the left side is false, the more typical one is 0 and empty string.

Dynamic introduction

Previously, we could use dynamic import through webpack, and now this feature is natively supported.

import('a/b.js'). then(b => {

But for most developers, there is no perception, after all, most people still use webpack to package.


Promise.allSettled returns an array of objects containing the results and values. No matter whether it succeeds or fails when executing each Promise, it will all be completed and then return the results. The following is a comparison with Promise.all

const p1 = Promise.resolve(1);
const p2 = Promise.reject(2);
const p3 = Promise.resolve(3);

* [{status:"fulfilled", value:1}
* {status:"rejected", reason:2}
* {status:"fulfilled", value:3}]
* /
Promise.allSettled([p1, p2, p3]). Then(result => console.log(result));

* error 2
* /
Promise.all([p1, p2, p3]). Catch(error => console.log('error', error));

Other features

Here are some other features mentioned in ES 2020:

  • Private attribute:Use # to identify the private attribute of the class and cannot be accessed from outside
  • BigInt:You can use BigInt to create bigger numbers
  • globalThis:provides globalThis to get the global this object in different environments
  • matchAll:This method returns all results that match the regular expression of the string
  • Module name space export:you need to import it before, then export it, now you can directly export everything under the module

None of these features are described in detail. For more information, please see the information below.

more info


Thank you very much for reading, welcome to follow, forward, share and support me.

QR code.png