As novidades do JavaScript em 2022
Tags: javascript, ecmascript, node, development
Published: 2022-08-05 18:09:02

---
title: As novidades do JavaScript em 2022
published: true
date: 2022-07-28 07:00:00 UTC
tags: javascript,ecmascript,nodejs,development
canonical_url: https://blog.lsantos.dev/news-js-2022/
cover_image: https://images.unsplash.com/photo-1472201248592-1241c92256ff?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDU2fHxZZWxsb3d8ZW58MHx8fHwxNjU3ODcyMzk3&ixlib=rb-1.2.1&q=80&w=2000
---

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!

<iframe width="200" height="113" src="https://www.youtube.com/embed/hDQu3AvvDfg?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen title="Como o JavaScript Evolui - entendendo as propostas do TC39"></iframe>

<!--kg-card-begin: markdown-->

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:

```
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](http://blog.lsantos.dev/os-ecmascript-modules-estao-aqui/) 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

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

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;
  }
}

```
<!--kg-card-end: markdown-->