O novo padrão JavaScript, ECMAScript 2022 (ou simplesmente ES2022), foi lançado trazendo muitas novidades. Neste artigo, veremos em detalhes os recursos mais importantes envolvidos nesse lançamento, e como podemos tirar proveito de suas funcionalidades.

1. Top-level awaits - Promises de nível superior

Com o lançamento dos novos recursos, veio o tão esperado await em nível superior. Antes, quando era preciso, a nível de módulo, consumir ou chamar um recurso assíncrono, era necessário englobar a chamada em um método async para podermos utilizar o await. Com a mudança atual, caso seja preciso realizar o consumo de algum recurso assíncrono no módulo de level mais alto, o await pode ser utilizado normalmente.

A seguir, um exemplo de como utilizar o await nas versões anteriores quando desejado consumir um recurso assíncrono:

// arquivo: produtos.js
async function recuperarProdutos() {
  const response = await fetch('https://produtos.com/api')
  console.log(response)
}

recuperarProdutos()

// node produtos.js

Obs.: Existem outras maneiras de realizar a execução, mas todas seguem o mesmo principio async await.

Agora, a partir do ES2022, poderemos utilizar o await da seguinte maneira:

// arquivo: produtos.js
const response = await fetch('https://produtos.com/api')
console.log(response)

// node produtos.js

Desta maneira, por exemplo, podemos, de maneira simples, consumir APIs assíncronas nativas fornecidas pelo próprio Node, normalmente em scripts que não necessitam de tanta complexidade.

2. Método at() em arrays

Um recurso também bastante funcional, e que traz consigo melhorias significativas na manipulação de arrays. Em resumo, ele nos permite interagir com índices de arrays e strings a partir do final.

A sua utilização com números (índices) positivos é semelhante ao uso convencional dos colchetes, porém quando utilizamos números negativos, ele interage a partir do final, de uma maneira bem simples.

Segue os exemplos comparativos:

const letters = ['a', 'b', 'c', 'd']

// Modelo convencional
letters[1] // 'b'
letters[letters.length - 1] // 'd' (último item)

// Com o uso do .at
letters.at(1) // 'b'
letters.at(-1) // 'd' (último item)

O mesmo recurso, .at(), também pode ser utilizado com variáveis do tipo string.

3. Métodos e atributos privados de classe

Para aqueles que estão acostumados a trabalhar com Orientação a Objeto, alguns recursos são primordiais para a criação de uma boa arquitetura. O JavaScript tem avançado bastante neste seguimento, e o ES2022 trouxe novidades nesta área. A declaração de atributos e métodos privados, e o acesso restrito a eles.

Vale ressaltar que um assunto bastante comentado é a convenção utilizada, #, que parece não agradar a todos. Bastante diferente do TypeScript, e outras linguagens, que utiliza a convenção private.

A declaração de uma classe passa a ficar da seguinte maneira com a utilização deste recurso:

class ClasseTestePrivado {
  #nome = 'Campo privado';
  #desc = 'Campo também privado';
  #outro;

  constructor(outro) {
    this.#outro = outro;
  }

  mostrarCampos() {
    console.log(this.#nome);
    console.log(this.#desc);
    console.log(this.#outro );
  }
}

const classeTestePrivado = new ClasseTestePrivado('teste')
classeTestePrivado.mostrarCampos()

classeTestePrivado.#nome // error - Private field '#nome' must be declared in an enclosing class

4. Error.cause - Erros aninhados 

A classe Error, e suas subclasses, agora permitem que passemos mais informações através da propriedade cause, assim tornando mais intuitivo trabalhar com erros encadeados e customizados. É bem frequente a necessidade de customizar as mensagens para comunicar o erro de uma maneira mais amigável, porém também é importante manter os dados que são essenciais para análise.

No exemplo a seguir, caso ocorra um erro na chamada da API, será levantado um novo erro com uma mensagem customizada e o erro original atrelado a ela.

class Produto {
  consultar() {
    try {
      // código de consulta de api.
    } catch (error) {
      throw new Error('Erro ao consultar api de produto', { cause: error })
    }
  }
}

No exemplo anterior, em um nível mais alto, ao lidar com o erro levantado teremos acesso a informações primordiais, como a causa original.

Curtiu as novidades? Outras serão publicadas em artigos futuros. Fique por dentro, siga também a Udewise no Instagram e no Twitter para receber as novidades assim que forem publicadas. Boa programação! 🚀