Desde o lançamento do padrão ECMAScript 2015 (também chamado ES6), o JavaScript mudou e melhorou seriamente. Esta é uma notícia muito boa para todos os desenvolvedores de JS. Além disso, agora uma nova versão do ECMAScript é lançada todos os anos. Talvez você não tenha prestado muita atenção ao que apareceu na versão mais recente do padrão, lançada em junho de 2019. O autor do artigo, cuja tradução estamos publicando hoje, quer falar em poucas palavras sobre as inovações do JavaScript e sobre o que pode ser esperado na próxima versão do padrão ECMAScript.
As oportunidades cujas propostas estão na terceira etapa de aprovação (Etapa 3) serão mencionadas aqui. Isso significa que eles provavelmente aparecerão na próxima versão do padrão ECMAScript, mas isso não pode ser confirmado com certeza absoluta.
Aqui está um repositório onde você pode encontrar informações sobre propostas que estão em diferentes estágios de aprovação.
Recursos ECMAScript 2019 (ES10)
O padrão ES10 possui
muitos recursos novos. Aqui vamos considerar apenas alguns deles. Ou seja, alguns novos métodos de matriz.
▍ Método Array.prototype.flat
Este método permite criar matrizes, que incluem outras matrizes, mais "planas", "compactando" para um determinado nível de profundidade.
const array = [1, 2, [3, 4]]; array.flat();
Esse é um recurso muito útil, especialmente nos casos em que você precisa trabalhar com matrizes aninhadas. Se a profundidade de aninhamento de matrizes na estrutura de dados exceder 1, uma única chamada para o método
flat não poderá tornar a matriz completamente "plana". Esse método aceita uma
depth parâmetro opcional, que permite especificar quantos níveis de aninhamento a dimensão da matriz processada deve ser reduzida.
Quanto mais profunda a matriz, mais recursos de computação serão necessários para processá-la. Observe que o IE e o Edge não suportam esse recurso.
Método Array.prototype.flatMap
Esse método primeiro processa os elementos da matriz usando a função passada a ela e depois converte a matriz em uma estrutura plana.
const arr = ["it's Sunny in", "", "California"]; arr.flatMap(x => x.split(" "));
A diferença entre
flatMap e
flatMap é que você pode passar sua própria função para o método
flatMap que converte os elementos da matriz original. Além disso, o
flatMap , ao contrário do
flat , "eleva" os elementos das matrizes em apenas 1 nível. Este método retorna uma nova matriz. Pode ser útil nesses casos quando, antes de você tornar uma certa matriz "plana", você precisa de alguma forma processar seus elementos.
Novos recursos de JS na aprovação do estágio 3
No terceiro estágio da coordenação, há muitas novas propostas interessantes para expandir e melhorar o idioma. Vamos considerar alguns deles.
▍ Separadores de dígitos numéricos
Aconteceu com você: escreva um número longo em uma variável e duvide da ortografia correta? A sentença em questão permite separar os bits dos números com sublinhados. Isso facilita o trabalho com números.
1_000_000_000
Cada desenvolvedor, depois de aceitar esse recurso, decidirá por si próprio se deve usar separadores de descarga ou não. Mas uma coisa é certa: esse recurso pode reduzir os inconvenientes associados ao cálculo dos dígitos de grandes números.
SingUsando aguardar no nível superior do código
O uso da palavra-chave
await no nível superior do código permite que os módulos atuem como grandes funções assíncronas. Devido a esse recurso, os módulos ECMAScript podem esperar que alguns recursos apareçam. Isso leva ao fato de outros módulos importá-los esperarão até que o corpo dos módulos importados esteja pronto para o trabalho.
O motivo desse recurso é que, quando um módulo é importado e possui uma função declarada com a
async , a saída dessa função é
undefined .
O exemplo a seguir mostra dois arquivos. Pode ficar
undefined na
output se a função for chamada antes que as tarefas representadas pelas promessas sejam concluídas.
Tudo será interrompido no
awaiting.js até que as
awaiting.js sejam resolvidas no
awaiting.js .
PerOperador ?? e verificando valores apenas em nulos e indefinidos
Talvez, entre todas as ofertas do Estágio 3, essa seja a mais útil. Muitas vezes temos que escrever algo como isto:
const obj = { name: 'James' }; const name = obj.name || 'Jane';
Se
obj.name for representado por algum valor falso, a sequência
Jane obj.name em
name . Como resultado, o
name não será algo como
undefined . Mas o problema é que uma string vazia neste caso será percebida como um valor falso. Se isso for levado em consideração, esse código deverá ser reescrito da seguinte maneira:
const name = (obj.name && obj.name !== '') || 'Jane';
É inconveniente escrever assim o tempo todo. Operador
?? (dois pontos de interrogação) permite verificar apenas valores
null e
undefined :
const response = { settings: { nullValue: null, height: 400, animationDuration: 0, headerText: '', showSplashScreen: false } }; const undefinedValue = response.settings.undefinedValue ?? 'some other default';
Operador? e cadeias opcionais
Essa sugestão está próxima da revisada, combinando verificações
null e
undefined . É sabido que os usuários do TypeScript
estão interessados nesse recurso.
Considere um exemplo:
const city = country && country.city;
Para chegar à propriedade da
city de um objeto do
country , é necessário verificar a existência do objeto do
country e a existência da propriedade da
city .
Usando o operador
?. (ponto de interrogação e período), este código pode ser convertido da seguinte forma:
const city = country?.city;
Esse recurso parece útil em tais situações:
import { fetch } from '../yourFetch.js'; (async () => { const res = await fetch();
▍ Método Promise.any
O método
Promise.any aceita um objeto
Promise.any contém objetos de promessa e retorna uma promessa que é resolvida com êxito quando pelo menos um dos objetos de promessa passados para ele é resolvido com êxito. Se todos os objetos da promessa forem rejeitados, ele retornará uma matriz contendo informações sobre os motivos da rejeição.
É assim que o uso do
Promise.any com a construção assíncrona /
Promise.any parece com:
try { const first = await Promise.any(promises);
Aqui está a mesma coisa implementada usando promessas:
Promise.any(promises).then( (first) => {
O JavaScript já possui os
Promise.all ,
.allSettled ,
.race , mas um método semelhante.
any , não era. Como resultado, temos uma nova oportunidade que complementa as existentes e pode ser útil em determinadas situações. Apesar de a
proposta já estar no terceiro estágio de aprovação, ela não pode ser incluída na próxima edição do padrão ECMAScript, pois requer testes adicionais.
Sumário
Há muitas sugestões interessantes para o desenvolvimento de JavaScript que estão no terceiro estágio de aprovação. Será interessante vê-los nos padrões ES11 e ES12. Obviamente, é improvável que alguém os use todos, mas alguns deles definitivamente encontrarão aplicativos amplos e contribuirão para o crescimento da qualidade do código JS.
Caros leitores! Você já está usando algum recurso JavaScript que está quase pronto para ser incluído na próxima versão do padrão?
