10 novos recursos de JavaScript no ES2020 que você deve conhecer

Boas notícias - os novos recursos do ES2020 estão finalizados! Isso significa que agora temos uma ideia completa das mudanças que estão acontecendo no ES2020, a nova e aprimorada especificação do JavaScript. Então, vamos ver quais são essas mudanças.

# 1: BigInt

BigInt, um dos recursos mais esperados em JavaScript, está finalmente aqui. Na verdade, permite que os desenvolvedores tenham uma representação de número inteiro muito maior em seu código JS para processamento de dados para manipulação de dados.

No momento, o número máximo que você pode armazenar como um inteiro em JavaScript é pow(2, 53) - 1. Mas o BigInt na verdade permite que você vá além disso.  

No entanto, você precisa ter um nanexado no final do número, como você pode ver acima. Isso ndenota que este é um BigInt e deve ser tratado de forma diferente pelo mecanismo JavaScript (pelo mecanismo v8 ou qualquer outro mecanismo que esteja usando).

Esse aprimoramento não é compatível com versões anteriores porque o sistema numérico tradicional é IEEE754 (que simplesmente não suporta números desse tamanho).

Nº 2: importação dinâmica

As importações dinâmicas em JavaScript oferecem a opção de importar arquivos JS dinamicamente como módulos em seu aplicativo de forma nativa. É exatamente como você faz com o Webpack e o Babel no momento.

Esse recurso o ajudará a enviar código de solicitação sob demanda, mais conhecido como divisão de código, sem a sobrecarga de webpack ou outros empacotadores de módulo. Você também pode carregar condicionalmente o código em um bloco if-else, se desejar.

A boa notícia é que você realmente importa um módulo e, portanto, ele nunca polui o namespace global.

# 3: Coalescência nula

A coalescência nula adiciona a capacidade de realmente verificar nullishvalores em vez de falseyvalores. Qual é a diferença entre os valores nullishe falsey, você pode perguntar?

Em JavaScript, um monte de 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 é undefinedou null, como quando é normal que uma variável tenha 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.

# 4: Encadeamento opcional

A sintaxe de encadeamento opcional 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, undefinedserá devolvido.

Isso não funciona apenas nas propriedades do objeto, mas também nas chamadas de função e matrizes. Super conveniente! Aqui está um exemplo:

# 5: Promise.allSettled

O Promise.allSettledmétodo aceita uma série de promessas e só resolve quando todas elas são acertadas - sejam resolvidas ou rejeitadas.

Isso não estava disponível nativamente antes, embora algumas implementações semelhantes gostassem racee allestivessem disponíveis. Isso traz "Basta executar todas as promessas - não me importo com os resultados" nativamente para o JavaScript.

# 6: String # matchAll

matchAllé um novo método adicionado ao Stringprotótipo que está relacionado às Expressões Regulares. Isso retorna um iterador que retorna todos os grupos correspondentes, um após o outro. Vamos dar uma olhada em um exemplo rápido:

# 7: globalThis

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

Isso ocorre porque é windowpara navegadores, globalpara Node e selfpara web workers. Se houver mais tempos de execução, o objeto global também será diferente para eles.

Portanto, você teria que ter sua própria implementação para detectar o tempo de execução e usar o global correto - ou seja, até agora.

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

Nº 8: Exportações de namespace de módulo

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

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

No entanto, nenhuma exportsintaxe simétrica existia, até agora:

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

Isso é equivalente ao seguinte:

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

# 9: Bem definido para ordem

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

# 10: import.meta

O import.metaobjeto foi criado pela implementação ECMAScript, com um nullprotótipo.

Considere um módulo module.js:

Você pode acessar meta informações sobre o módulo usando o import.metaobjeto:

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

Ele retorna um objeto com uma urlpropriedade que indica a URL base do módulo. Este será o URL do qual o script foi obtido (para scripts externos) ou o URL base do documento do documento que o contém (para scripts embutidos).

Conclusão

Eu amo a consistência e a velocidade com que a comunidade JavaScript evoluiu e está evoluindo. É incrível e verdadeiramente maravilhoso ver como o JavaScript saiu de uma linguagem que foi vaiada, 10 anos depois, para uma das linguagens mais fortes, flexíveis e versáteis de todos os tempos hoje.

Você deseja aprender JavaScript e outras linguagens de programação de uma maneira completamente nova? Vá para uma nova plataforma para desenvolvedores na qual estou trabalhando para testá-la hoje!

Qual é o seu recurso favorito do ES2020? Conte-me sobre isso tweetando e conectando-se comigo no Twitter e Instagram!

Esta é uma postagem de blog composta a partir do meu vídeo que é sobre o mesmo tópico. Significaria muito para mim se você pudesse demonstrar um pouco de amor!