A versão 2022 do ECMAScript no Javascript, a especificação por trás do Javascript, está incrível e eu vou explorar com você todas as principais novidades!
Método .at() em todos os indexáveis
Uma das novidades mais simples, mas ao mesmo tempo mais legais é a adição do método .at() em listas e qualquer outro indexável nativo, tipo strings.
O que ele faz é dar o item na posição pedida do array, por exemplo:
const carrinho = [‘banana’, ‘maçã’, ‘pera’]
carrinho.at(0) // banana
carrinho.at(-1) // pera
// Fora do limite
carrinho.at(100) // undefined
E isso funciona para qualquer indexável, então se tivermos uma string:
const frase = ‘O rato roeu a roupa do rei de Roma’
frase.at(0) // O
frase.at(-1) // async
Índices de captura em RegExp
Agora, além de trazer o match da sua Regex, o construtor das RegExp também trás uma lista de índices de onde aquele match começou e terminou, por exemplo:
const input = ‘abcd’
const match = /b(c)/.exec(input)
const indices = match.indices
indices.length // 2
matches.length // 2
// O número de indices é igual ao numero de matches
indices[0] // [1,3] inicio/fim do primeiro match “b”
input.slice(indices[0][0], indices[0][1
]) // mesma coisa que match[0]
Object.hasOwn
Uma variação mais simples do Object.hasOwnProperty que retorna true para todas as propriedades que são diretamente pertencentes a um objeto (sem serem herdadas):
const livros = {}
livros.paginas = 123
Object.hasOwn(livros, ‘paginas’) // true
Object.hasOwn(livros, ‘toString’) // false
// O ‘in’ verifica todas as propriedades
‘paginas’ in livros // true
‘toString’ in livros // true
Causas de erros com Error.cause
Uma das principais mudanças e uma das que eu acho que vão ser mais úteis. Essa nova propriedade da classe erro mostra a causa do erro enviado.
const erro = new Error(‘Um erro’, { cause: ‘A causa desse erro’ })
erro instanceof Error // true
erro.cause // ‘A causa desse erro’
O principal caso de uso é evitar que o objeto de erro seja passado diretamente:
try {
naoFunciona();
} catch (err) {
throw new Error(‘naoFunciona failed!’, { cause: err });
}
Top-level await
Isso já está disponível no Node.js há um tempo, mas desde que temos os ESModules já é possível realizar o top-level await, ou seja, um await fora de uma async function:
// index.mjs
// falha na implementação antiga
await Promise.resolve(‘🍎’);
// → SyntaxError: await is only valid in async function
// correção que a gente costuma fazer com IIFE
(async function() {
await Promise.resolve(‘🍎’);
// → 🎉
}());
// nova implementação de top-level await
await Promise.resolve(‘🍎’) // ‘🍎’
Class field declarations Javascript
Nós FINALMENTE agora temos a declaração de propriedades de classe fora do construtor, ou seja, a gente pode declarar e atribuir um valor a uma propriedade de uma classe sem precisar de um construtor com this.prop = prop.
Isso já era bastante comum no TypeScript, mas agora está chegando nativamente ao JavaScript:
class Classe {
/*
ao invés de:
constructor() { this.publicID = 42; }
*/
publicID = 42; // public field
/*
ao invés de:
static get staticPublicField() { return -1 }
*/
static campoEstatico = -1;
// propriedades privadas estáticas
static #campoPrivadoEstatico = ‘private’;
//métodos privados
#privateMethod() {}
// declarações estáticas com static declaration blocks
static {
// Executado quando a classe é criada
}
}
Checagem de campos por reflexão de classe no Javascript
Esse é um caso de uso complicado, mas quando tentávamos checar uma propriedade de uma classe através de um bloco de inicialização estático, iríamos ter um erro dizendo que a classe não foi inicializada ou que a propriedade não existe, isso foi corrigido:
class C {
#prop;
#metodo() {}
get #getter() {}
static isC(obj) {
// usando ‘in’
return #prop in obj && #metodo in obj && #getter in obj;
}
}
Leia também: