8 Novos recursos JavaScript no ES2020 que você precisa conhecer!

Introdução O ES2020 trouxe muitas novidades, não tanto quanto o ES6 trouxe, mas com certeza nos trouxe recursos úteis...

Data de publicação: 16/06/2020

Introdução

O ES2020 trouxe muitas novidades, não tanto quanto o ES6 trouxe, mas com certeza nos trouxe recursos úteis para o nosso dia a dia. Nesse breve artigo, trago grande parte das novidades introduzidas nessa nova versão, lembrando que a maioria já é possível ser testada e utilizada. Para mais informações e para verificar a compatibilidade de cada uma delas com os browsers, você pode visitar o site do V8.

 

#1 Nullish coalescing

Nesta versão, um novo operador foi introduzido para auxiliar no gerenciamento de valores nulos (null) e indefinidos (undefined).

Basicamente, o operador de coalescência nula (??) irá retornar apenas valores não nulos.

Sua proposta se assemelha com operadores já existentes, tais como && e || que manipulam valores truthy e falsy. Os valores falsy em JavaScript são: empty strings, undefined, null, false, NaN, número 0.

Usando o operador de coalescência nula (??)

 

Usando o operador OU (||)

É nítido e possível notar a diferença no retorno durante o uso de cada um dos operadores acima, já que enquanto o operador OU (||) somente retorna algo quando sua condição for verdadeira, o operador de coalescência nula (??) apenas retorna algo não nulo ou não indefinido.

 

#2 Optional chaining

O operador de encadeamento opcional permitirá o acesso mais profundo nas propriedades dentro de um objeto em JavaScript, sem precisarmos nos preocupar se a propriedade existe ou não.

Portanto, se a propriedade existir, irá retornar o valor dela, se não, irá retornar undefined.

Antes desse recurso existir, era gerado um erro em tempo de execução caso a propriedade não existisse no objeto.

O operador de encadeamento opcional não funciona apenas com propriedades de objetos, uma vez que é possível utilizá-lo com funções e arrays.

O exemplo a seguir demonstra o uso com o novo operador de encadeamento opcional:

Já o exemplo abaixo demonstra o uso sem o novo operador, sendo possível ver erros gerados ao invocar propriedades ou funções inexistentes no objeto.

 

#3 globalThis

Essa nova propriedade que o ES2020 nos traz irá facilitar muito o uso de valores globais, de acordo com o contexto do objeto global.
A propriedade globalThis possui uma referência ao objeto global, não importa onde você esteja executando seu código.
Ela vem para resolver algumas inconsistências no uso de objeto global em diferentes ambientes, isso porque em ambiente Node.js, a propriedade global é representada por global, enquanto que no navegador é representado por window e self para Web Workers.

 

#4 Promise.allSettled

O método Promise.allSettled() aceita um array de Promises.

Seu retorno nada mais é que uma Promise sendo sempre resolvida, independente do status das Promises enviadas via parâmetro.

O status de cada Promise enviada via parâmetro pode ser fulfilled (resolvido) ou rejected (rejeitada).

A estrutura do seu retorno é um array de objetos com a descrição do resultado de cada Promise.

 

#5 Dynamic import

Esse recurso no ES2020 nos dará a possibilidade de importar arquivos JS dinamicamente como módulos dentro do código.

O método import(‘modulo.js’) retorna uma Promise para o módulo importado, portanto, é possível usá-lo com async/await.

Em um exemplo prático, com Dynamic import, será possível carregar o código em um bloco condicional (if-else).

 

#6 Module Namespace Exports

No módulo JavaScript, já era possivel usar a seguinte sintaxe para importar todos os itens que estavam exportados (export e export default) em um arquivo.

import * as util from './util'

Mas não era possivel realizar o export com a mesma sintaxe.
Então podiamos fazer algo equivalente a isso:

import * as util from './util'
export { util }

Agora no ES2020 é possivel utilizar o export com a mesma sintaxe do import, ficando assim:

export * as util from './util'

#7 String.matchAll()

O método matchAll é especialmente útil quando utilizado com expressões regulares. Este método retornará um iterator com informações de cada condição que correspondeu ao regex passado via parâmetro.

 

#8 BigInt

No JavaScript pode ser um problema representar um número maior que pow(2, 53) – 1, isso porque este é o maior valor que ele pode armazenar como um inteiro.

Com o objeto BigInt, ele nos dá a possibilidade de trabalhar com números inteiros maiores que pow(2, 53) – 1, evitando a perca de precisão do valor.

Outro exemplo de caso de uso com BigInt, é que podemos usá-lo para realizar cálculos com valores inteiros, como somar, subtrair, dividir e multiplicar:

Além disso, o objeto BigInt pode ser utilizado em blocos condicionais (if-else) quando comparados com números inteiros:

Dessa forma, percebemos, nos exemplos acima, que os valores resultantes possuem a letra n no final. Essa letra indica que tal valor é um BigInt e precisa ser tratado diferente pela engine do JavaScript.

 

Conclusão

JavaScript é uma linguagem que, com o passar dos anos, vem se tornando cada vez mais simples e poderosa para se utilizar.

Desde o ES6, vimos grandes evoluções na linguagem que tornaram nossos dias mais produtivos quando trabalhamos com ela. Neste post, vimos os recursos que chegaram com a nova versão e que irão auxiliar muito no nosso dia a dia.

Referências

https://v8.dev/features/tags/es2020

https://alligator.io/js/es2020/

https://www.freecodecamp.org/news/javascript-new-features-es2020/

https://dev.to/olivierloverde/es2020-summary-of-new-features-examples-2260

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

20 + doze =

Posts relacionados

  1. Sobre a Dextra

    Somos especialistas em desenvolvimento de software sob medida para negócios digitais. Pioneiros na adoção de metodologias de gestão ágil, combinamos processos de design, UX, novas tecnologias e visão de negócio, desenvolvendo soluções que criam oportunidades para nossos clientes.

  2. Categorias

Scroll to top