All Features of ES2020 with Examples

ES2020 is a continuation of ES’s (ECMAscript) JavaScript improvement. In the year 2020 ES’s important changes are the following:

BigInt: BigInt is a new numeric primitive in JavaScript. In the BigInt type, You can store integers that are arbitrary precision. BigInt can store numbers that are greater than max_safe_integer (2⁵³-1). Before this feature, a programmer needs to use some third-party libraries which leads to more load time, more compile time, and more parsing time. 

Example: This example shows the basic use of the BigInt in Javascript.

Javascript

let max = Number.MAX_SAFE_INTEGER;

console.log(max);
//  9007199254740991

console.log(++max);
//  9007199254740992

console.log(++max);
//  9007199254740992

console.log(++max);
//  9007199254740992

let big = 9007199254740991n;

console.log(big)
//  9007199254740991n

console.log(++big);
//  9007199254740992n

console.log(++big);
//  9007199254740993n

console.log(++big);
//  9007199254740994n

console.log(typeof big);
//  bigint

Output:

9007199254740991
9007199254740992 
9007199254740992 
9007199254740992 
9007199254740991n
9007199254740992n
9007199254740993n
9007199254740994n
bigint

Note: To create a BigInt, you have to add ‘n’ at the end of any Integer and it will become a BigInt. Doesn’t matter if the integer is less than or greater than MAX_SAFE_INTEGER.

String.prototype.matchAll: This feature is made for making the regex (or simple searching without regex) matches easier where we have to deal with more than one match inside a String. The matchAll method takes an argument which is a regular expression or the value which we want to search inside the String.

Example: This example shows the use of the String.prototype.matchAll() method in Javascript.

Javascript

let gfg = "Geeks for Geeks";

for(iter of gfg.matchAll('e')) {
  console.log(iter[0])
}

// Using regex
const string = 'Magic hex numbers: DEADBEEF CAFE';
const regex = /\b\p{ASCII_Hex_Digit}+\b/gu;

for (const match of string.matchAll(regex)) {
  console.log(match[0]);
}

Output: 

e
e
e
e
DEADBEEF
CAFE

Dynamic Import: Earlier ECMA2015 already implemented the import functionality. Before Dynamic import, we only import a script on the top of the code but using dynamic import, we can import a script anywhere and according to your conditionals (e.g. you can use if/else to make sure if the script should be loaded or not). 

Example: This example shows the use of the above approach.

Javascript

/* Some sample code....
   Now ask user for array and if user says
   yes the call it from another file */

    let userDecision = confirm(
      "Do you want an array and print it");

    if (userDecision == true) {
        let arr =  import("./gfg.js").then((res) => {

            //  [1, 2, 3, 4, 5, 6]
            console.log(res.default)
       }).catch((er) => {
            console.log(er)
        })
    } else {
        console.log("Nothing to do")
    }

Global this: This is an amazing feature. There are many JavaScript environments like node environment, browser environment, and service work environment and all of these environments has their own global for example in the browser the global is the window, for the node environment it is Global and for the service worker it is Self. 

Example: This example shows the use of the approach.

Javascript

let findGlobal = () => {
  if (typeof self !== 'undefined') {
      return self
  };
  if (typeof window !== 'undefined') {
      return window
  };
  if (typeof global !== 'undefined') {
      return global;
   }
};

// Function call
console.log(findGlobal());

Output: 

Object [global] {
  global: [Circular],
  clearInterval: [Function: clearInterval],
  ....
  ....
  ....
  setImmediate: [Function: setImmediate] {
    [Symbol(nodejs.util.promisify.custom)]: [Function]
  }
}

This method is lengthy and not so accurate that’s why ECMA introduced the globalThis keyword and now we can find the global this value in a single line as shown below:

Example: This example shows the use of global this.

Javascript

console.log(globalThis);

Output: 

Object [global] {
  global: [Circular],
  clearInterval: [Function: clearInterval],
  ....
  ....
  ....
  setImmediate: [Function: setImmediate] {
    [Symbol(nodejs.util.promisify.custom)]: [Function]
  }
}

Promise.allSettled( ): Sometimes in JavaScript promises, we just want the outcome of all the promiseshave if it is settled or not. We don’t need the outcome of the promise whether it is resolved or rejected but the promise should not be pending state.  To achieve this we have allSettled( ) function in ECMA2020.

Example: This example shows the above-described approach.

Javascript

<script>
    const myProms = [
        Promise.resolve("Hello"),
        Promise.resolve(1234),
        Promise.resolve("Some other Promise")
    ]

      Promise.allSettled(myProms).then((res) => {
     console.log(res)
      }).catch(
     (err) => {
     console.log(err)
      })
</script>

Output: 

(3) [{…}, {…}, {…}]
0
:{status: 'fulfilled', value: 'Hello'}
1
:{status: 'fulfilled', value: 1234}
2
:{status: 'fulfilled', value: 'Some other Promise'}
length
:3
[[Prototype]]
:Array(0)

Optional chaining: This is a very useful feature that the ECMA introduced. Using optional chaining you can go deeper and deeper without knowing the property name of a nested object. Suppose we have a nested object, and we want to go deeper, and we are not sure what is the name of the property names at many steps then we can use the optional chaining operator (?.) if we just use the dot (.) to access the property names and accidentally we entered any wrong property name then we will get an error but by using optional chaining operator (?.) we will get undefined instead of the error message. 

Example: This example shows the above-described approach.

Javascript

let gfg = {
    user : {
        firstUser : {
            name: {
                firstName: "Geeks",
                lastName : "forGeeks"
            }
        }
    }
}

console.log(gfg.user.firstUser.name.firstName)
// Geeks

console.log(gfg.user.ANY_RANNDOM_STRING?.name.firstName)
// undefined

console.log(gfg.user.ANY_RANNDOM_STRING.name.firstName)
// Uncaught TypeError: Cannot read property
// 'name' of undefined

Output:

Geeks
undefined
Uncaught TypeError: Cannot read property 'name' of undefined....