As novidades do JavaScript em 2022

Todos os meses temos diversas novidades nas nossas linguagens favoritas, o JavaScript não é diferente!

Nesse vídeo eu explico um pouco mais sobre o processo de lançamento de novas funcionalidades do JavaScript, se você ainda não assistiu, eu recomendo fortemente para poder entender melhor como tudo funciona!

Dito isso, a versão 2022 do ECMAScript, a especificação por trás do JS, 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:

1
const carrinho = ['banana', 'maçã', 'pera']
2
carrinho.at(0) // banana
3
carrinho.at(-1) // pera
4

5
// Fora do limite
6
carrinho.at(100) // undefined

E isso funciona para qualquer indexável, então se tivermos uma string:

1
const frase = 'O rato roeu a roupa do rei de Roma'
2

3
frase.at(0) // O
4
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:

1
const input = 'abcd'
2
const match = /b(c)/.exec(input)
3
const indices = match.indices
4

5
indices.length // 2
6
matches.length // 2
7
// O número de indices é igual ao numero de matches
8

9
indices[0] // [1,3] inicio/fim do primeiro match "b"
10
input.slice(indices[0][0], indices[0][1
11
]) // 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):

1
const livros = {}
2
livros.paginas = 123
3

4
Object.hasOwn(livros, 'paginas') // true
5
Object.hasOwn(livros, 'toString') // false
6

7
// O 'in' verifica todas as propriedades
8
'paginas' in livros // true
9
'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.

1
const erro = new Error('Um erro', { cause: 'A causa desse erro' })
2

3
erro instanceof Error // true
4
erro.cause // 'A causa desse erro'

O principal caso de uso é evitar que o objeto de erro seja passado diretamente:

1
try {
2
  naoFunciona();
3
} catch (err) {
4
  throw new Error('naoFunciona failed!', { cause: err });
5
}

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:

1
// falha na implementação antiga
2
await Promise.resolve('🍎');
3
// → SyntaxError: await is only valid in async function
4

5
// correção que a gente costuma fazer com IIFE
6
(async function() {
7
  await Promise.resolve('🍎');
8
  // → 🎉
9
}());
10

11
// nova implementação de top-level await
12
await Promise.resolve('🍎') // '🍎'

Class field declarations#

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:

1
class Classe {
2
    /*
3
      ao invés de:
4
      constructor() { this.publicID = 42; }
5
    */
6
    publicID = 42; // public field
7

8
    /*
9
      ao invés de:
10
      static get staticPublicField() { return -1 }
11
    */
12
    static campoEstatico = -1;
13

14
    // propriedades privadas estáticas
15
    static #campoPrivadoEstatico = 'private';
16

17
    //métodos privados
18
    #privateMethod() {}
19

20
    // declarações estáticas com static declaration blocks
21
    static {
22
      // Executado quando a classe é criada
23
    }
24
}

Checagem de campos por reflexão de classe#

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:

1
class C {
2
  #prop;
3

4
  #metodo() {}
5

6
  get #getter() {}
7

8
  static isC(obj) {
9
    // usando 'in'
10
    return #prop in obj && #metodo in obj && #getter in obj;
11
  }
12
}