5 novas features do JavaScript no ES2020 que você deve conhecer!

Introdução

Desde o ES2015, cada versão do JavaScript vem com uma série de novas funcionalidades incríveis. Para aqueles, que assim como eu, são entusiastas dessa linguagem de programação, é sempre um prazer acompanhar o seu avanço. Apesar de não ter acompanhado de perto as outras espeficicações da linguage, quando nós lemos esse artigo incrível do Mehul Mohan sobre o ES2020, ficamos muito animados e decidimos compartilhar o conteúdo com vocês.

ES2020

1. BigInt

O BigInt é um dos recursos mais esperados no JavaScript, mas com o ES2020 essa espera irá acabarb . Isso possibilita aos desenvolvedores uma representação numérica maior que nas versões anteriores, onde o valor máximo que poderia ser armazenado como um inteiro era pow(2,53) - 1.

Imagem

No entanto, você precisa adicinar um n no final do número, como você pode ver acima. Este n informa que o valor é um BigInt e deve ser tratado de forma diferente pelo JavaScript.

2. Importação dinâmica

As importações dinâmicas oferecem a opção de importar arquivos JS como módulos de forma nativa.

Esse recurso ajudará no code splitting, eviton a sobrecarga de empacotadores de módulo, como o Webpack.

Image

3. Coalescência nula

O nome pode parecer estranho, mas esse é um recurso muito útil, pois possibilitará verificar valores nulos ao invés de valores falsos.

Para reforçar o entendimento desse novo recurso vale lembrarmos quais as diferenças entre valores nulos e falsos.

Em JavaScript, muitos valores são falsos, 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, ou seja, se ela é undefined ou null. Com a chegada do ES2020 será possível fazer isso, basta acrescentar o operador ??.

Image

4. Encadeamento opcional (Optional Chaining)

A sintaxe do encadeamento opcional permite que você acesse propriedades de objetos profundamente aninhados sem se preocupar se a propriedade existe ou não. Caso ela não exista, será retornado undefined.

Isso funciona não apenas nas propriedades do objeto, mas também nas chamadas de função e matrizes. Saca só esse exemplo:

Image

5. globalThis

Se você já escreveu algum código JS que pudesse ser executado no Node, no ambiente do navegador e também dentro de web-workers, você deve ter tido dificuldades em encontrar o objeto global.

Isso ocorre porque você deve informar window para os navegadores, global para o Node e self para os web workers. Se houver runtimes diferentes, o objeto global também será diferente.

Desse modo você teria que implementar uma detecção para o tempo de execução e, em seguida, usar o global correto. Mas isso muda com o ES2020, que traz o globalThis.

O globalThis sempre se refere ao objeto global, não importa onde você está executando seu código:

Imagem

Conclusão

É super empolgante poder acompanhar de perto essas features incríveis que estão chegando ao JavaScript. Neste post nós trouxemos os recursos que mais nos interessaram, mas você pode conferir outros cinco neste [artigo aqui]. Qualquer sugestão, dúvidas ou críticas, deixem aqui nos comentários!

Comentários