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 (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.
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 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
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 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]
}
}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....
