Features that ECMAScript 2020 needs to know (dynamic import; null merge operator; optional chain operator; Promise.AllSettled)

One: dynamic import

One of them is that we can use async/await to dynamically import dependencies. This means that we don't have to import everything first, and we can only import dependencies when we need them. As a result, the performance of the application is improved by loading modules at runtime.

Example:

if (calculations) {
    const calculator = await import('./calculator.js');
    const result = calculator.add(num1, num2);

    console.log(result);
}

In the above code snippet, you can see that we only import the calculator module when we want to perform calculations. Therefore, we will not unnecessarily slow down the application by loading all the code before runtime. Therefore, dynamic import is a convenient supplement.

Two: Null merge operator

"The null-merging operator (??) is a logical operator. When its left operand is null or undefined, it will return its right operand, otherwise it will return its left operand.

Example:

let score = 0;
let pass = score ?? 60;

console.log(pass);//0

The difference between || and ?? is that || will only return the real value. When the score is 0, it will return 60, while ?? is relatively strict.

Three: optional chain operator

有一个嵌套多层的对象，例如：
 let obj =  {
    attr: {
        name: '王二小'
    }
 }
获取name的值 
let n_val = obj.attr.name
如果这样直接获取可能会报错，导致程序异常，所以我们需要对 obj 、attr此次验证
即： let n_val = obj && obj.attr && obj.attr.name

The method to simplify the above code is the optional chain operator. The code is as follows:

let n_val = obj?.attr?.name

：： Promise.AllSettled

The new method Promise.allSettled() waits for all promises to be fulfilled. That is, it requires a set of Promises and only returns when the promise is fulfilled (rejected or resolved).

Example:

const promise1 = Promise.resolve(5);
const promise2 = Promise.reject("Reject promise");
const promises = [promise1, promise2];

Promise.allSettled(promises)
    .then(results => console.log(`Here are are your promises results`, results))
    .catch(err => console.log(`Catch ${err}`));

The above code returns an array of objects, each of which represents a Promise. If the promise is fulfilled, the object has a state and value; if the promise is rejected, the object has a state and reason. Therefore, Promise.AllSettledit is very useful when you want to fulfill all promises, whether rejected or fulfilled.

Five: private variables

All you need to do to make a private variable is to add a hash symbol in front of the variable. For example, it #firstNameis a private variable and cannot be accessed outside the class. Attempting to call this variable outside the class will result in a SyntaxError.

class Person {
  #firstName = "Catalin";
  getFirstName() 
  { 
      console.log(this.#firstName) 
   }
}

const person1 = new Person();
person1.getFirstName() // "Catalin"

console.log(person1.firstName); // Returns "undefined"
console.log(person1.#firstName); // Returns "Uncaught SyntaxError: Private field '#firstName' must be declared in an enclosing class"

In the above code, you can see a private class variable at work. Trying to firstNameaccess variables outside the class, we receive an error. Therefore, when we do not want to expose data outside the class, it is very convenient to add.