JavaScript Features That Are Introduced In ES2020, ES2021

◉ Dynamic Imports

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

◉ Optional Chaining Operator

const person = {
name: "Catalin Pit",
employer: {
name: "Catalins Tech",
}
};
console.log(person?.employer?.name);
const allowedValues = [1, 5, 10, 13, 90, 111];
console.log(allowedValues?.[2]);
// functional call
const response = myAPI.getData?.();

◉ Nullish Coalescing Operator

let score = 0;
let pass = score ?? 60;
console.log(pass);
let score = 0;
let pass = score || 60;
console.log(pass);

◉ Private Class Variables & Methods

A private variable that cannot be accessed outside a class.

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"

2. Promise.any

This is very similar to the Promise.race method, however, it has one key difference. While Promise.race will return if any of the promises are Settled, Promise.any will return only if one of the promises is Fulfilled.

const promise = (delay) => new Promise((resolve) => {
setTimeout(() => resolve(`${delay} milliseconds`), delay);
});
const promises = [promise(50), promise(40), promise(30)];
const resolved = await Promise.any(promises);
console.log(resolved); // 30 milliseconds

3. Promise.AllSettled

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}`));

4. String.prototype.replaceAll

const catPhrase = 'A cat sat on the cat mat';
const dogPhrase = catPhrase.replaceAll('cat', 'dog');
console.log(dogPhrase); // A dog sat on the dog mat

5. Logical Assignment Operators

Or Or Equals

let a = “hello”;a ||= 10;console.log(a); // hello
let b = “”;
b ||= “world”;
console.log(b); // world

And And Equals

let a = true;
a &&= “hello”;
console.log(a); hello
let b = false;
b &&= “world”;
console.log(b); false

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

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