All Features of ES2020 with Examples - GeeksforGeeks

08 Jan, 2021
ES2020 is a continuation of ES’s (ECMAscript) JavaScript improvement. In the year 2020 ES’s important changes are the following:
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 (253-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.
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 regexconst 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
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()
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 callconsole.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]
  }
}
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: 
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....
JavaScript-Misc
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to get character array from string in JavaScript?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript