ES2020 Tag

New Features In ES2020

ECMAScript has grown to be one of the world’s most widely used general-purpose programming languages. ECMAScript is based on several originating technologies, the most well-known being JavaScript (Netscape) and JScript (Microsoft). Here are the new features of ES2020.

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.

const promises = [
  Promise.resolve(1),
  Promise.reject(2),
  Promise.resolve(3)
];

const onResolve = (data, prefix) => {
  console.log(prefix, 'Resolved with', data);
};

const onReject = (err, prefix) => {
  console.log(prefix, 'Rejected with', err);
};

Promise.all(promises)
  .then(onResolve.bind(null, 'all'))
  .catch(onReject.bind(null, 'all'));

// Result:
// all Rejected with 2

Promise.allSettled(promises)
  .then(onResolve.bind(null, 'allSettled'))
  .catch(onReject.bind(null, 'allSettled'));

// Result:
// allSettled Resolved with
// [
//   {
//     "status": "fulfilled",
//     "value": 1
//   },
//   {
//     "status": "rejected",
//     "reason": 2
//   },
//   {
//     "status": "fulfilled",
//     "value": 3
//   }
// ]

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

For more information and to design a website using front-end technology, Hire Front-End Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“. To develop your custom website using JS, please visit our technology page.

Content Source:

1. medium.com