Introdução
Antes de começar, o que é o ES20?
ECMAScript é uma linguagem de script que forma a base do JavaScript. O ECMAScript é padronizado pela ECMA International Standards Organization nas especificações ECMA-262 e ECMA-402.
(MDN web docs & ECMAScript specification)
O ES20 é a versão dessa especificação lançada no início de 2020 e que introduz algumas novidades que ajudam a vida do programador que está utilizando JavaScript e melhora a qualidade do seu código. Lembrando que algumas dessas novidades já estavam implementadas em alguns ambientes e/ou você irá precisar de algumas configurações extras para habilitá-las.
Propriedade de classe privada
O uso de classes proporciona muitas coisas, dentre elas, a principal é a reutilização de seu código por diversas outras classes e módulos. Porém como ela será utilizado em diversos lugares, que você não possui controle, é interessante que nem todas as partes do código estejam livres para serem alteradas.
Hoje em dia uma convenção, que a comunidade em geral faz, é o uso de um underline “_” na frente da declarações de propriedade que deveriam ser privadas. Porém ela ainda pode ser acessada e modificada, propositalmente ou não.
Com o ES20 essa funcionalidade toma corpo fazendo a adição do símbolo de hash “#” antes da declaração de uma propriedade, tornando a acessível apenas dentro da própria classe.
Nota: Para entender o porque o # foi escolhido segue o link do FAQ feito pela galera do TS39
Promise.allSettled
Quando trabalhamos com várias promises e elas possuem algum tipo de dependência/vínculo, às vezes é necessário esperar que todas sejam finalizadas antes de prosseguir. Para tanto, uma das maneiras mais comuns de se fazer isso é utilizando o Promise.all. Ela é uma função que recebe um array de promisese retorna uma única promiseque é resolvida quando todas as promises do array foram resolvidas. O “problema” do Promise.all é que a promise retornada por ele é rejeitada caso alguma das promises seja rejeitada, e isso nem sempre é o que você deseja, necessitando a criação de algum tipo de tratamento para cada uma das promise desse array para que ela não seja rejeitada.
O Promise.allSettled ajuda nesses casos, assim como o Promise.all. Ele recebe um array de promises e retorna um interator (simplificado é algo que você pode iterar como em um array) com todos os resultados das _promise_s finalizadas, tenha ela sido resolvida ou rejeitada. Dessa maneira você consegue iterar sobre o resultado das promises e filtrar apenas as resolvidas ou apenas as rejeitadas.
Operador de nulabilidade (Nullish Operator)
Normalmente no JavaScript alguns operadores booleanos são utilizados como condicionais e esse é o caso do “ou” (||). Especialmente no JavaScript, o operador || retorna a segunda parte da comparação caso a primeira seja falsa, no lugar de um sempre retornar um booleano (true/false).
Com essa possibilidade do uso de uma sintaxe mais enxuta para condicionais, eles não comumente são utilizados para validação de variáveis e propriedades de objetos. Nesses casos entra o tratamento de valores truthy e falsy. Os valores falsy são todos aqueles que retornam false quando são transformados em Boolean. Existem 9 valores considerados falsy no JavaScript:
- null
- undefined
- false
- NaN
- 0,
- -0,
- 0n,
- -0n
- “”
Esses valores falsy podem gerar problemas na hora de testar valores que deveriam ser válidos para a sua lógica, como 0 ou “”, dificultando, por exemplo, a definição de valores default.
Para melhorar esses testes foi introduzido no ES20 o operador de nulabilidade (??), que retorna faz uma comparação mais restrita, retornando o segundo valor apenas se o primeiro for null ou undefined.
Operador de encadeamento opcional (Optional Chaining Operator)
Outro problema, similar ao que o operador de nulabilidade se propõe a resolver, é o de tentar acessar valores de um objeto e no caminho para acessar esse valor um deles é undefined.
Ao adicionar uma interrogação (?) antes do ponto (.) quando estiver acessando um valor de um objeto faz com que esse valor seja considerado opcional e retorne undefined caso não exista no lugar de um erro.
Bigint
O problema por trás do BigInt é algo mais complexo e que caso queira saber mais a fundo fica a dica de leitura do proposal do TS39. Mas, resumidamente, a maneira como o JavaScript implementa o tipo Number faz com que o valores maiores que 2^53 (9007199254740991) nem sempre funcionem como o esperado.
Se algum dia você estiver com esse tipo de problema o BigInt estará lá para salvar o seu dia. Ao colocar a letra n no final da sua declaração de número ele será interpretado como um BigInt. Vale a pena ressaltar que não é possível realizar operações entre Number e BigInt, logo todas operações irão precisar de uma conversão de tipos antes.
Import Dinâmico
Ao realizar um import tudo que foi importado é linkado ao seu código antes dele começar a rodar de fato. Isso funciona muito bem para quase todos os casos. Porém, por razões que você só consegue determinar em tempo de execução, você não deseja esse código linkado desde o início. Dessa maneira, caso o alvo do seu import seja utilizado raramente você teria um import de algo que talvez nunca seja utilizado, gerando uma carga extra no arquivo.
Com o import dinâmico, você consegue importar um arquivo no meio do seu código e ele retorna uma promise com o módulo importado.
String.prototype.matchAll
Diferentemente do String.prototype.match, que retorna apenas o resultado que deu match em uma string, o String.prototype.matchAll retorna um iterator com todos os resultados de match, incluindo os grupos de captura.
Global this
Ao utilizar o JavaScript em diferentes ambiente, por exemplo no Navegador ou no NodeJS, você irá descobrir que existem certas variáveis globais que você pode utilizar para conseguir informações sobre o ambiente ou modificá-lo. Porém em cada um desses ambientes essa variável global possui um nome diferente. Isso pode gerar “problemas” na hora de escrever programas que devem funcionar independentemente do ambiente, pois será preciso verificar em qual deles você está para utilizar o correto. No ES20 adicionou uma nova variável global que faz esse trabalho pra você, e mantêm as antigas funcionais para não perder compatibilidade de códigos já feitos. Você consegue acessá-los através do globalThis.
Module namespace exports
No ES2015 foram adicionados as seguintes sintaxes na hora de exportar um módulo junto ao import.
Porém não existia uma sintaxe equivalente à que temos no import a seguir:
Agora é possível fazer o uso de uma sintaxe similar para o export:
Esse material é um compilado, em português, das principais novidades do ES20, com alguns exemplos para facilitar o entendimento e aplicação. Espero que você tenha conseguido aprender tanto quanto eu aprendi escrevendo esse post e qualquer dúvida pode contar com a gente.
Referências
- EMDN web docs (Mozilla)
- Ecma TC39 Site (Ecma)
- Ecma TC39 Github (Ecma)
- What’s new in ES2020? New JavaScript Features (codedamn – Youtube)
- What’s new in ECMAScript 2020 (ES2020) (alligator – Blog)
- EES2020: Summary of new features & examples (Olivier Loverde – Blog)
- EES Private Class Features: 2 Minute Standards (Brian Kardell – Blog)
