O que há de novo no ES2020?

As propostas do ECMAScript estão crescendo e dando origem a novas implementações. Portanto, você já consegue acessar os novos recursos do ECMAScript resumidos no ES2020. E quais são eles?

Dynamic Import

O Dynamic Import é um dos recursos mais interessantes do ES2020. É um recurso que você pode usar com carregamento lento. Antes, se você quisesse importar um módulo em JavaScript, teria algo como:

import Math from ('./Math.js');
const Math = new Math;
Math.multiply();

Nesse caso, temos uma maneira estática de importar o módulo Math e não poderíamos atrasar a carga se quiséssemos que esse módulo dependesse de uma ação do usuário. Graças ao ES2020, você pode usar o carregamento lento sem um webpack. Você pode utilizar a importação como uma função em qualquer lugar do seu código, usando uma função assíncrona que retorna uma Promise:

import Math from ('./Math.js');
.then ((Math) => {
    const Math = new Math;
    Math.multiply();
});

BigInt

Representa um número maior que 2 ^ 53-1 no JavaScript pode ser um problema, pois este é o maior número que o objeto Number pode representar. O BigInt é um objeto que ajuda a representar números maiores que esse. Ele é interessante, por exemplo, no caso de uma multiplicação que gere um número maior que isso. Como o Int já indica, você deve utilizar números inteiros, e não flutuantes.

const bigNumber = BigInt(90000880880909);

Promise.allSettled

O método Promise.allSettled() retorna uma promise que é resolvida depois de todas as promises retornarem resolved ou rejected, com um vetor de objetos descrevendo cada resultado da promise. O Promise.allSettled() retorna algo como Promise.all(). Mas o Promise.all() aguarda que todas as promises sejam cumpridas ou qualquer promise seja rejeitada.

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject)=>
setTimeout (reject, 100, 'foo'));
const promise = [promise1, promise2];

Promise.allSettled(promises).
 then((results)=> results.foreach((result)=>
 console.log(result.status)));

globalThis:

A propriedade globalThis contém o valor global de this com o contexto do objeto global. Graças a isso, você não precisa diferenciar se o código está sendo executado em um navegador (this) ou no Node (global):

function canMakeHTTPrequest(){
    return typeof globalThis.XMLHttpRequest === 'function';
}

console.log(canMakeHTTPrequest());

Gostou desta notícia? Comente abaixo!

Referência: https://www.ma-no.org/en/programming/javascript/javascript-what-s-new-in-es2020