JavaScript ES2020 - What you should know

The article comes from the public number: front-ender

ES2020 or ECMAScript 2020 brings exciting features to JavaScript. I n this article, I want to talk about my favorite ES2020 features. T his means that this article does not cover all of the new additions. So let's take a look at my favorite new features:

• Dynamic import
• Empty-position merge operator
• Optional link operator
• Private class variable Private
• Promise.allSettled
• For more information and everything else, check out the official ECMAScript language specification

Dynamic import

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

How does it improve performance? U sing the regular module system, we import modules statically at the beginning of the program. W hether we need them now or in the future, we must import them first. I n addition, all code from the import module is evaluated at load time. T herefore, it unnecessarily slows down the application. W hy? Because it downloads the imported modules and evaluates the code for each module before executing the code.

Let's look at an example.

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

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

Empty-position merge operator

"Empty value merge operator (?) i s a logical operator that returns its right operade when its left operade is null or undefined, otherwise its left operade is returned. ”

Basically, the Nullish merge operator allows us to check whether the value is null or undefined, and in this case provide a fallback value. Let's look at an example:

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


console.log(pass);

In the snippet above, the value is pass0. T he reason is ???? T he operator does not force zeros to be forged values. The variable pass gets only 60 allocations if the variable score is undefined or null

However, the dual pipeline "||" W hat's the difference? A nd this operator? W hen using dual pipe "||" , it always returns real values, which can lead to some unexpected results. When using empty values to merge operators, we can be more strict, so the default value is allowed only if the value is null or undefined.

For example, suppose we have the following code:

let score = 0;
let pass = score || 60;


console.log(pass);

In the example above, when used, a value of 0 is considered a false value || 。 I n the code snippet above, the value pass is 60, which is not what we want. Therefore, the double question mark allows us to check whether the variable is empty, which means that the variable is undefined or empty.

Promise.allSettled

Using the optional link operator, we can access deeply nested properties from objects. I f the property exists, the operator returns its value. If the property does not exist, the operator returns undefined.

const person = {
 name: "Catalin Pit",
 employer: {
  name: "Catalins Tech",
 }
};


console.log(person?.employer?.name);

The snippet above illustrates an example of accessing deeply nested object properties. H owever, we can use it on arrays and function calls. I n the following snippet, you can see that we check that the array exists and, if so, access the third value. In addition, you can check if the API has a function and, if so, call it.

const allowedValues = [1, 5, 10, 13, 90, 111];
console.log(allowedValues?.[2]);


// functional call
const response = myAPI.getData?.();

In summary, the optional link operator is convenient and helps us make our code more readable and short.

Private class variables

From now on, we can also create private variables in classes in JavaScript. A ll you need to do to make a private variable is to add a hash symbol before the variable. For example, #firstName is a private variable that cannot be accessed outside the class.

Attempting to call the variable outside the class causes SyntaxError.

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


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


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

In the code above, you can see a private class variable at work. T rying firstName to access variables outside the class, we received an error. Therefore, it is convenient to add data when we do not want to expose it outside the class.

Additional content in the article is not unique. And more, I encourage you to check out the official ECMAScript language specification to see all of this.

That's what W3Cschool编程狮 has learned about JavaScript ES2020 - what you should know about, and I hope it's helpful.