ES13 Javascript - Novas funcionalidades

[Marcelo Luiz Baraldi]

Assim como a maioria das linguagens de programação, o Javascript está constantemente evoluindo. Todo ano, a linguagem lança novas e poderosas features que tornam o trabalho do desenvolvedor bem mais conciso e de fácil leitura.

Recentemente foi lançado o ECMAScript 2022, também conhecido como ES13. Esse é um novo padrão que dita novas funcionalidades para a linguagem. Vamos te apresentar algumas das mais importantes mudanças lançadas neste novo release!

 

• Declarações de campos de Classe (Class FIeld Declarations)

  Antes do ES13, campos de classe só podiam ser declarados juntos ao construtor. Ao contrário da maioria das outras linguagens, não era possível declarar ou definir no escopo mais abrangente da classe.

  ES13 removeu essa limitação, deixando o processo mais claro:

• Métodos e Campos Privados (Private Methods and Fields):

  Anteriormente, não era possível declarar membros privados em uma classe. Um membro era tradicionalmente prefixado com um underline ( _ ) para indicar que era privado. Apesar disso, ainda podia ser acessado e modificado de fora da classe.

  Com o ES13, é possível adicionar campos e membros privados à uma classe prefixando com a hashtag(#). Tentar acessar o conteúdo por fora, causará um erro:
  

  Repare que o erro foi de sintaxe, durante o tempo de compilação. Isso acontece porque o compilador não espera que você nem tente acessar campos privados de fora da classe e assume que você está tentando declarar um novo.

 

• Operador await no nível superior (await Operator at the Top Level)

  No Javascript, o operador await é usado para pausar uma execução até que uma Promise esteja concluída ou rejeitada. Anteriormente, só era possível usar esse operador dentro de uma função assíncrona (async). Não era possível acessá-la dentro do escopo global.
  

  Com o ES13, agora é possível:
  

• Método .at() (method .at() function for Indexing)

  Tipicamente utilizamos colchetes [ ] no javascript para acessar um elemento dentro de um array, de forma que a lista se inicia com 0.

  Entretanto, é necessário usar o index de arr.length - N se queremos acessar os últimos índices

  Com o novo método .at(), é possível fazer isso de forma mais concisa e expressiva, simplesmente passando um valor negativo ao N como parâmetro do .at(), sendo possível utilizar o método dentro de arrays, strings e objetos TypedArray.

• Object.prototype.hasOwnProperty() Acessível (Accessible Object.prototype.hasOwnProperty() )

  No Javascript, é possível utilizar o método Object.prototype.hasOwnProperty() para verificar se o objeto tem determinada propriedade.
  

  Mas há problemas com essa utilização. o método .hasOwnProperty() não é protegido e pode ser sobrescrito (override) por um método completamente diferente:

  Outro problema é que objetos criados com um prototype nulo causam um erro ao chamarem esse método: Uma forma de lidar com essa situação é utilizar o método call() da seguinte forma:
   

  O novo método Object.hasOwn() tem a mesma funcionalidade do Object.hasOwnProperty, recebendo o Object como primeiro argumento e a propriedade para verificar no segundo:
  

• Causa de Erro (Error Cause)

  Para debugar comportamentos inesperados, erros tem que ser verificados com informações contextuais como "error messages", de forma que é expressado o que aconteceu em determinado momento. A propriedade .cause no Object error vai nos permitir especificar que erro causou determinado erro. de forma que os erros possam ser encadeados sem necessidade de aglutina-los dentro de condições:
  

• Método de enconrar último item de array: (Array find from last)

  No Javascript já temos o método Array.prototype.find o Array.prototype.findIndex. Sabemos que para encontrar a partir do último a performance do FindIndex é superior. Apesar disso, caso nos importamos com a ordem dos elementos (itens duplicados no array, por exemplo), uma melhor forma de aproximação seriam os novos métodos .findLast e .findLastIndex :
  
  
  

 

Referências: https://github.com/tc39
https://javascript.plainenglish.io/latest-es13-javascript-features-24cba45c93f7
https://codingbeautydev.com/blog/es13-javascript-features/