Recentemente, o encadeamento opcional e o valor do atributo padrão ( Nullish Coalescing ) foram movidos para a última quarta etapa do processo TC39.
Na prática, isso significa que essas e outras inovações se tornarão parte do padrão JavaScript já neste 2020. Vamos considerá-los neste artigo.
Você pode acompanhar o suporte ao navegador aqui ("Recursos para 2020") - aprox. perev.
O uso de expressões regulares globais ou fixas, quando você precisar capturar vários grupos na mesma linha, pode não ser trivial.
String.prototype.match não retorna grupos capturados na presença de um sinalizador global e, sem ele, você pode obter apenas a primeira correspondência completa com o modelo e seu grupo.
Um exemplo:
let regexp = /t(e)(st(\d?))/g; let str = 'test1test2'; const results = str.match(regexp); console.log(results);
Resultado com a bandeira "g"
O resultado sem a bandeira "g"O uso de String.prototype.matchAll garante que todas as correspondências e seus grupos sejam retornados.
Um exemplo:
let regexp = /t(e)(st(\d?))/g; let str = 'test1test2'; let array = [...str.matchAll(regexp)]; console.log(array);
Resultado:
Antes do BigInt, o maior valor representado por Number era 2⁵³-1 (MAX_SAFE_INTEGER). Agora o JavaScript terá uma primitiva que pode exceder o limite.
Você pode criar um BigInt adicionando 'n' a um número ou usando a função BigInt ().
Um exemplo:
let bigInt = 4n console.log(bigInt * bigInt)
- BigInt não é equivalente a Number , mas pode ser convertido para o último.
- Ao executar operações como divisão, o resultado será arredondado para o todo mais próximo.
- Não pode ser usado com Number sem conversão de tipo.
Tentando adicionar BigInt com um número ...
let bigInt = 4n + 2 console.log(bigInt)
... resulta em uma exceção:
Acessar objetos globais no mundo JavaScript sempre foi uma dor de cabeça. Você deve estar familiarizado com a sintaxe específica do ambiente, o que cria dificuldades desnecessárias ao escrever código portátil e torna necessário o uso de algo como getGlobal.
Um exemplo:
var getGlobal = function () { if (typeof self !== 'undefined') { return self; } if (typeof window !== 'undefined') { return window; } if (typeof global !== 'undefined') { return global; } throw new Error('no global object found'); }; var globals = getGlobal();
Com o advento do globalThis, você pode parar de pensar no meio ambiente e unificar objetos globais.
Um exemplo:
globalThis.someFunction = () => 'hello' console.log(globalThis.someFunction())
Suponha que você tenha algumas promessas e queira fazer alguma coisa depois que elas forem concluídas (não importa se é bem-sucedida ou não). Promise.allSettled é para esse propósito.
Um exemplo:
const fulfilledPromise = Promise.resolve("success"); const rejectedPromise = Promise.reject("error") const promises = [fulfilledPromise, rejectedPromise]; Promise.allSettled(promises). then((results) => results.forEach((result) => console.log(result)));
Resultado:
Deseja carregar um módulo em tempo de execução, dependendo de uma condição específica? Agora isso pode ser feito sem bibliotecas de terceiros.
Basta chamar a função de importação , que retornará a promessa.
Um exemplo:
import("some_module") .then(module => { module.doSomething(); }) .catch(err => { console.error(err.message); });
Diferentemente da importação estática, onde você precisa especificar o nome do módulo explicitamente, durante a importação dinâmica, é possível, por exemplo, passar um modelo para a função.
Exemplo usando um modelo:
import(`${some_module}.js`) .then(module => { module.doSomething(); }) .catch(err => { console.error(err.message); });
Quando você precisa obter um atributo ou valor padrão, se for nulo ou indefinido , geralmente usamos o operador '||'.
Antes da coalescência nula:
const response = someResponse.properties.mayBeUndefined || 'Response';
Imagine, no entanto, que um atributo tenha um valor "falso".
O problema de usar '||':
const someResponse = {properties: { mayBeUndefined: ''}} const response = someResponse.properties.mayBeUndefined || 'Response'; console.log(response)
Resultado:
Este é um comportamento indesejável. Nesse caso, precisávamos de um valor de atributo, não de um valor padrão.
Com a coalescência nula, esse problema não será. O valor padrão será retornado apenas para atributos nulos ou indefinidos .
Usando coalescência nula:
const someResponse = {properties: { mayBeUndefined: ''}} const response = someResponse.properties.mayBeUndefined ?? 'Response'; console.log(response)
Resultado:
Para acessar o subatributo, precisamos garantir que o atributo acima exista. Até o momento, a existência de cada um dos atributos em excesso precisa ser verificada manualmente.
Antes do encadeamento opcional:
const someObj = { property: 'prop', otherProperty: { name: 'prop2' } }; const property = someObj.NotOtherProperty ? someObj.NotOtherProperty.name: undefined; console.log(property);
Com o advento do encadeamento opcional , você pode usar o operador '?.' para acesso opcional a subatributos. O código abaixo é equivalente ao código acima.
Usando encadeamento opcional:
const someObj = { property: 'prop', otherProperty: { name: 'prop2' } }; const property = someObj.NotOtherProperty?.name; console.log(property);
O encadeamento opcional torna o código muito mais limpo, especialmente se houver muitos atributos na string.
Conclusão
Você pode tentar executar exemplos de um artigo no console: alguns deles já estão implementados nas versões mais recentes dos navegadores, outros provavelmente serão implementados muito em breve. De uma forma ou de outra, já é possível começar a se relacionar com as possibilidades do artigo como parte do idioma de 2020.