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:

1. BigInt

BigInt is a new numeric primitive in JavaScript. In 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, more parsing time. 

Filename: index.js

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 the integer is less than or greater than MAX_SAFE_INTEGER.

2. 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.

Filename: index.js

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

3. 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). 

Javascript

<script>
  /* 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 {
      cnosole.log("Nothing to do")
  }
</script>

Filename: gfg.js

Javascript

const x = () => {
    return [1,2, 3, 4, 5, 6]
}

export default x()

4. Global this

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

Filename: index.js

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:

Filename: index.js

Javascript

console.log(globalThis);

Output: 

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

5. Promise.allSettled( )

Sometimes in JavaScript promises, we just want the outcome of all the promises, 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.

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: 

6.  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. 

Filename: index.js

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....