JavaScript

New Features In ES2020 You Should Check

What are the new features in ES2020?

Photo by Patrick Ward on Unsplash

Happy New Year, you all! With the new year, the new ECMAScript version has been released! It’s good news for people like me who love ECMAScript. In the previous ECMAScript version, there were many fun and useful features added. What is waiting for us this time? Let’s check them out in short!

Dynamic Import

Now, you can import a file dynamically.

import { max } from '../math.js'; const nums = [1, 2, 3];

max(...nums); // 3

This has been the way we could import a file. And the JavaScript engine reads the modules in the file and bring them into the file where those modules are called. But now, you can do this as follows.

const numbs = [1, 2, 3]; if (numbs.length) {

const math = '../math';

import(math)

.then(module => {

module.max(...numbs);

})

}

A dynamic import returns a promise. Which means you can write it this way as well.

const math = '../math.js';

const module = await import(math);

module.max(...numbs);

Why this feature is good is that you can use a dynamic import in a regular JavaScript code like the example above.

Here’s the browser support for Dynamic Import.

Chrome: 63

Edge: No Support

Firefox: 67

IE: No Support

Opera: 50

Safari: 11.1

BigInt

When you had to add two numbers that are too big enough to cause an overflow, weren’t you suffered?

Number.MAX_VALUE * 2 // Infinity

BigInt is a savior in this case.

You can make a BigInt by calling BigInt() with parenthesis or 2n with ‘n’ at the end of a number.

const num = 2;

const bigNum = BigInt(num); bigNum; // 2n

bigNum === 2n; // true

You can also add, subtract, multiply and divide it.

const bigN = BigInt(10); bigN + bigN; // 20n

bigN * 3n; // 30n

bigN - BigInt('55'); // 45n

bigN / 3n; // 3n

Note that bigN / 3n returns 3n , not 3.33333n . Because as you also can assume from its name, it only handles the integers. So bigN / 3n is similar to Math.floor(10 / 3) .

However, unfortunately, you can’t make a BigInt with a float number. And also, you can’t use a BigInt and a Number together, either.

BigInt(3.3);

// Uncaught RangeError BigInt('3.3');

// Uncaught SyntaxError BigInt(1) + 1;

// Uncaught TypeError

// Cannot mix BigInt and other types

Instead, the only allowed case to mix the operations is when you compare the size of the operations.

BigInt(1) < 2 // true

And a BigInt can be evaluated like a Number if it’s in if condition.

function print(n) {

if (BigInt(n)) {

console.log('hi');

} else {

console.log('bye');

}

} print(1); // hi

print(0); // bye

Here’s the browser support for BigInt

Chrome: 67

Edge: No Support

Firefox: 68

IE: No Support

Opera: 54

Safari: No Support

Promise.allSettled

This is quite similar to Promise.all , but there’s a significant difference between them. Promise.all waits for all the promises being fulfilled or an any promise being rejected. On the other hand, Promise.allSettled doesn’t care about that. What it cares is to know if all the promises are done, whichever their status is. So every input promise could be fulfilled or rejected, but it doesn’t matter to Promise.allSettled . Just all of them have to be done.

The example is from Tomas Dostal

This might be quite useful when you want to do some works before some action, for example, getting all of the required data before the user sees the list page. But the user could see the empty items because the fetch might be failed.

Here’s the browser support for Promise.allSettled .

Chrome: 76

Edge: No Support

Firefox: 71

IE: No Support

Opera: Unknown

Safari: Unknown

globalThis

This is lit. It’s dead simple and easy to use.

globalThis refers to the global this context on which your running context is. If you’re on Browsers, globalThis will be this , if you’re on Node, globalThis will be global . Hence no need to think about the different environmental issues anymore.

// worker.js

globalThis === self // node.js

globalThis === global // browser.js

globalThis === window

And this is how it works under the hood, but don’t use it in your code!

var getGlobal = function () {

if (typeof self !== 'undefined') { return self; }

if (typeof window !== 'undefined') { return window; }

if (typeof global !== 'undefined') { return global; }

throw new Error('unable to locate global object');

};

Here’s the environmental support for gloablThis .

Chrome: 71

Edge: No Support

Firefox: 65

IE: No Support

Opera: No Support

Safari: 12.1

Node: 12

Conclusion

There are many fun new features in ES2020. Most of them, however, don’t support the old browsers and they aren’t always stable in every environment. So you should consider what environments you should support at your service.

Resources