Artigo original: 10 New JavaScript Features in ES2020 That You Should Know

Boas notícias – os novos recursos do ES2020 já estão disponíveis! Isso significa que agora temos uma visão completa das mudanças que ocorreram com a chegada do ES2020, a nova e aprimorada especificação do JavaScript. Então, vamos ver quais mudanças foram essas!

Nº 1: BigInt

BigInt, um dos recursos mais esperados no JavaScript, finalmente chegou. Ele permite que os desenvolvedores tenham a representação de um inteiro, escrito em JS, muito maior para processamento de dados à medida que você os manipula.

No momento, o número máximo que você pode armazenar como um inteiro em JavaScript é pow(2, 53) - 1 . Com o BigInt, porém, você consegue muito mais.

Entretanto, você precisa ter um  n anexado no final do número, como pode ver acima. Este n significa que o número é um BigInt e deve ser tratado de modo diferente pela JavaScript Engine (pela engine v8 ou qualquer engine que esteja usando).

Essa melhoria não é compatível com versões anteriores, pois o sistema numérico tradicional é o IEEE754 (que não suporta números desse tamanho).

Nº 2: Importação dinâmica

As importações dinâmicas (em inglês, dynamic imports) em JavaScript oferecem a opção de importar arquivos em JS de modo dinâmico, como módulos em sua aplicação nativa. Ou seja, a mesma coisa que você consegue fazer com o Webpack e o Babel no momento.

Esse recurso ajudará você a enviar código de solicitação sob demanda, mais conhecido como code splitting (divisão de código), sem a sobrecarga do Webpack ou de outros empacotadores de módulos. Se preferir, você também pode carregar código de modo condicional em um bloco if-else.

O interessante é que você está realmente importando o módulo e, portanto, evitando de poluir o namespace global.

Nº 3: Coalescência nula

A coalescência nula (em inglês, nullish coalescing) adiciona a capacidade de verificar verdadeiramente valores nullish em vez de valores falsey. Nesse ponto, você pode se perguntar: qual é a diferença entre valores nullish e falsey?

Em JavaScript, muitos valores são falsey, como strings vazias, o número 0, undefined, null, false, NaN e assim por diante.

No entanto, muitas vezes, você pode querer verificar se uma variável é nula – isto é, se é undefined ou null, como quando não há problema em uma variável ter uma string vazia ou até mesmo um valor falso.

Nesse caso, você usará o novo operador de "coalescência nula", ??

Você pode ver claramente como o operador OR sempre retorna um valor verdadeiro, enquanto o operador nulo retorna um valor não nulo.

Nº 4: Encadeamento opcional

A sintaxe do encadeamento opcional (do inglês, optional chaining) permite que você acesse propriedades de objetos profundamente aninhados sem se preocupar se a propriedade existe ou não. Se existir, ótimo! Caso contrário, será retornado um undefined.

Isso não funciona apenas em propriedades de objetos, mas também em chamadas de funções e arrays. Muito conveniente! Aqui está um exemplo:

Nº 5: Promise.allSettled

O método Promise.allSettled aceita um array de Promises e só o resolve quando todas as Promises são resolvidas ou rejeitadas.

Isso não estava disponível de modo nativo antes, embora algumas implementações próximas, como race e all, já estivessem disponíveis.

Agora, é possível "apenas executar todas as Promises - sem se importar com os resultados" nativamente para o JavaScript.

Nº 6: String#matchAll

matchAll é um novo método adicionado ao protótipo String, que está relacionado a Expressões Regulares. Ele retorna um iterador, que, por sua vez, retorna todos os grupos correspondentes, um após o outro. Vejamos um exemplo simples:

Nº 7: globalThis

Se você escrevesse algum código JS multiplataforma que pudesse ser executado no Node, no ambiente do navegador e também dentro de web-workers, você teria dificuldade em obter o objeto global.

Isso ocorre porque o ambiente global é window para os navegadores, global para Node e self para os web-workers. Se houver mais tempos de execução, o objeto global também será diferente para eles.

Então, você precisaria ter sua própria implementação de detecção de tempo de execução e então usar o global correto – ao menos, até agora.

O ES2020 nos traz globalThis, que sempre se refere ao objeto global, não importando onde você esteja executando seu código:

Nº 8: Módulo Namespace Exports

Nos módulos do JavaScript, já era possível utilizar a seguinte sintaxe:

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

No entanto, nenhuma sintaxe de export simétrica existia, até agora:

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

A linha acima equivale a:

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

Nº 9: Ordem de entrada bem definida

A especificação ECMA não definiu em qual ordem for (x in y)  deve ser executado. Embora os navegadores tenham implementado uma ordem consistente por conta própria até então, isso foi oficialmente padronizado no ES2020.

Nº 10: import.meta

O objeto import.meta foi criado pela implementação do ECMAScript com um protótipo null.

Considere um módulo, module.js:

<script type="module" src="module.js"></script>

Você pode acessar as metainformações sobre o módulo usando o objeto import.meta:

console.log(import.meta); // { url: "file:///home/user/module.js" }

Ele retorna um objeto com uma propriedade url indicando o URL de base do módulo. Este será o URL a partir do qual o script foi obtido (para scripts externos) ou o URL de base do documento que o contém (para scripts incorporados).

Conclusão

Adoro a consistência e a velocidade na qual a comunidade do JavaScript evoluiu e está evoluindo. É realmente incrível e maravilhoso ver como o JavaScript veio de uma linguagem que era bastante criticada, há 10 anos, para uma das linguagens mais fortes, flexíveis e versáteis atualmente.

Você deseja aprender JavaScript e outras linguagens de programação de uma maneira completamente nova? Acesse a nova plataforma para desenvolvedores na qual o autor está trabalhando atualmente e teste-a.

Qual é o seu recurso favorito do ES2020? Informe o autor por meio de mensagem ou conecte-se com ele pelo Twitter ou pelo Instagram!

Este artigo é baseado em um vídeo do autor sobre o mesmo tópico. Seria muito importante para ele que você apoiasse esse material, curtindo-o e compartilhando-o.