# As novidades do JavaScript em 2022

O JavaScript está sempre evoluindo! Vem comigo nesse artigo que eu vou te mostrar quais são as novidades da linguagem mais amada do mundo em 2022.

- URL: https://blog.lsantos.dev/news-js-2022/
- Published: 2022-07-28
- Updated: 2026-07-16
- Category: technology
- Tags: javascript
- Language: pt
- Author: Lucas Santos

---
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!

![](https://www.youtube.com/watch?v=hDQu3AvvDfg)

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:

```js
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:

```js
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:

```js
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):

```js
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.

```js
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:

```js
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 [[os-ecmascript-modules-estao-aqui|ESModules]] já é possível realizar o top-level await, ou seja, um `await` fora de uma `async function`:

```js
// 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

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:

```js
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

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:

```js
class C {
  #prop;

  #metodo() {}

  get #getter() {}

  static isC(obj) {
    // usando 'in'
    return #prop in obj && #metodo in obj && #getter in obj;
  }
}
```