Full Stack Developer

Top new javascript features introduced in es2020

Top New JavaScript Features Introduced in ES2020 | Mushfiqur’s Blog

Top New JavaScript Features Introduced in ES2020 | Mushfiqur’s Blog

Since the addition of ECMAScript in 2015, the overall state of the art of the development in JavaScript has emerged to a new height. The JavaScript language specification has been regularly revised with new features every year. The ECMA International is calling these features new ECMAScript 2020 or JavaScript ES11(see intro here). In this post, we are going to discuss a few new interesting features of those.

Since the addition of ECMAScript in 2015, the overall state of the art of the development in JavaScript has emerged to a new height. The JavaScript language specification has been regularly revised with new features every year. The ECMA International is calling these features new ECMAScript 2020 or JavaScript ES11(see intro here). In this post, we are going to discuss a few new interesting features of those.

Let’s dive into the new JAVASCRIPT features

String.prototype.matchAll()

Since the addition of ECMAScript in 2015, the overall state of the art of the development in JavaScript has emerged to a new height. The JavaScript language specification has been regularly revised with new features every year. The ECMA International is calling these features new ECMAScript 2020 or JavaScript ES11(see intro here). In this post, we are going to discuss a few new interesting features of those.

Since the addition of ECMAScript in 2015, the overall state of the art of the development in JavaScript has emerged to a new height. The JavaScript language specification has been regularly revised with new features every year. The ECMA International is calling these features new ECMAScript 2020 or JavaScript ES11(see intro here). In this post, we are going to discuss a few new interesting features of those.

Though this function isn’t exactly a brand new one, since the new update in ES11, we are having a very good time when matching string against a regular expression. Let’s look at the following example:

const regexp = RegExp('foo[a-z]*','g');
const str = 'table football, foosball';
const matches = str.matchAll(regexp);

for (const match of matches) {
  console.log(`Found ${match[0]} 
           start=>${match.index} end=>${match.index + match[0].length}.`);
}
// expected output: "Found football start=>6 end=>14."
// expected output: "Found foosball start=>16 end=>24."

// matches iterator is exhausted after the for..of iteration
// Call matchAll again to create a new iterator
Array.from(str.matchAll(regexp), m => m[0]);
// Array [ "football", "foosball" ]
Dynamic Imports with import()

Dynamic imports in JavaScript natively give you the option to import JavaScript files dynamically as modules in your application. This is just like how you do it with Webpack and Babel at the moment. This feature will help you ship on-demand-request code, better known as code splitting, without the overhead of Webpack or other module bundlers. You can also conditionally load code in an if-else block if you like.

The good thing is that you actually import a module, and so it never pollutes the global namespace.

const doMath = async (num1, num2) => {
  if (num1 && num2) {
    const math = await import('./math.js');
    console.log(math.add(5, 10));
  };
};
doMath(4, 2);
BigInt

BigInt is one of the most anticipated features in JavaScript which is now finally here. It actually allows developers to have much greater integer representation in their JS code for data processing for data handling.

At the moment the maximum number you can store as an integer in JavaScript is pow(2, 53) - 1 . But BigInt actually allows you to go even beyond that.

let oldNum = Number.MAX_SAFE_INTEGER; 
console.log(oldNum);
//output => 9007199254740991

let newNum = 9007199254740992n;
console.log(newNum);
//output => 9007199254740992n

++oldNum
console.log(oldNum);
//output => 9007199254740992

++oldNum
console.log(oldNum);
//output => 9007199254740992

++newNum
console.log(newNum);
//output => 9007199254740993n

++newNum
console.log(newNum);
//output => 9007199254740994n

++newNum
console.log(newNum);
//output => 9007199254740995n
Nullish Coalescing

Nullish coalescing adds the ability to truly check nullish values instead of falsey values. What is the difference between nullish and falsey values, you might ask? In JavaScript, a lot of values are falsey, like: empty strings, the number 0, undefined, null, false, NaN, etc.

Probably, there’s a lot of times you might want to check if a variable is nullish, that is if it is either undefined or null, like when it’s okay for a variable to have an empty string, or even a false value.

In that case, you’ll use the new nullish coalescing operator -> ??

false ?? 'Something truthy'
false

undefined ?? 'Something truthy'
"Something truthy"

null ?? 'Something truthy'
"Something truthy"

false || 'Something truthy'
"Something truthy"

undefined || 'Something truthy'
"Something truthy"

null || 'Something truthy'
"Something truthy"

NaN ?? 'Something truthy'
NaN

NaN || 'Something truthy'
"Something truthy"
Module Namespace Exports

In JavaScript modules, it was already allowed us use the following things:

import * as utils from './utils.mjs';

However, we didn’t any option for symmetric export syntax until ES2020.

export * as utils from './utils.mjs';

The above is equivalent to the following:

import * as utils from './utils.mjs';
export { utils };
Promise.allSettled

While operating on multiple promises, particularly when they rely on each other, it could be helpful to log what happens to each debug error. With Promise.allSettled, we will make a new promise that will only return after all the promises made are fulfilled. This will allow us access to an array of data on every promise.

Since the addition of ECMAScript in 2015, the overall state of the art of the development in JavaScript has emerged to a new height. The JavaScript language specification has been regularly revised with new features every year. The ECMA International is calling these features new ECMAScript 2020 or JavaScript ES11(see intro here). In this post, we are going to discuss a few new interesting features of those.

Since the addition of ECMAScript in 2015, the overall state of the art of the development in JavaScript has emerged to a new height. The JavaScript language specification has been regularly revised with new features every year. The ECMA International is calling these features new ECMAScript 2020 or JavaScript ES11(see intro here). In this post, we are going to discuss a few new interesting features of those.

This is identical to Promise.all, but there is a major distinction between them. Promise.all holds until all the promises are fulfilled or refused. On the other side, Promise.allSettled doesn’t even care for that. It just makes sure that all the promises are accomplished, whatever their status may be. So any input promise may be fulfilled or refused, it doesn’t matter to Promise.allSettled. Both of them have to be finished.

const p1 = new Promise((res, rej) => setTimeout(res, 1000));
const p2 = new Promise((res, rej) => setTimeout(rej, 1000));

Promise.allSettled([p1, p2]).then(data => console.log(data));

// [
//   Object { status: "fulfilled", value: undefined},
//   Object { status: "rejected", reason: undefined}
// ]
for-in mechanism

The ECMA specification did not specify in which order for (x in y)  should run. Even though browsers implemented a consistent order on their own before now, this has been officially standardized in ES2020.

globalThis

If you wrote some cross-platform JS code which could run on Node as well as in the browser environment as well as inside web-workers, you’d have a hard time getting hold of the global object. This is because it is window for browsers, global for Node, and self for web workers. If there are more runtimes, they’ll be different for them as well.

So you would have had to have your own implementation of detecting runtime and then using the correct global – that is, until now. ES2020 brings us globalThis which always refers to the global object, no matter where you are executing your code.

globalThis.Animation == window.Animation
true

JavaScript is being enriched so fast which is definitely very good for web development. Since the ES6 was released in 2015, we have been witnessing a lively development of the language.

In this article, we discussed some of the features of the ES2020. Thanks for reading it.

1 Comment

  |     |  
Full Stack Developer

About me

A profound honest Full Stack Developer with a passion for creating delicate solutions in the least amount of time, with more than seven years of experience in the Web Application Development. Implemented complex user stories that make the business count on more conversion and grow with it.

Started career with ASP.NET but eventually revamped skills with JavaScript, ReactJs, NodeJs and Ruby on Rails.

Throughout my career, I have contributed to the businesses who have a positive impact on society through my active and innovative contributions to the growth of the organisation. While being an independently motivated engineer, I appreciate the collective efforts and collaborative productivity within the team environment. I am open-minded and focused on learning new technologies which have direct impacts on the betterment of human lives.