Novos recursos do ECMAScript 2022

Acompanhe neste artigo todos os novos recursos do ECMAScript 2022 que é a décima terceira edição da especificação que vai padronizar tudo no mundo do JavaScript.

Em suma, ECMAScript é a própria linguagem JavaScript e sua padronização. Você consegue saber mais detalhe sobre este assunto no artigo qual a diferença entre ECMAScript e JavaScript?

Os novos recursos do ECMAScript 2022 introduziram diversas funcionalidades novas como:

Promises de nível superior em módulos sem a necessidade do async.
Atributos e métodos privados.
Atributos e métodos estáticos.
Método para indexação relativa em strings e Arrays .at().
O uso do Object.hasOwn que é uma alternativa conveniente para Object.prototype.hasOwnProperty.
Propriedade cause em objetos de erro.

Promises de nível superior em módulos sem a necessidade do async.

Até o ECMAScript 2021 só podíamos usar a palavra reservada await com a presença do async. Em quase todos os casos isso não é um problema, mas por vezes precisamos executar alguma promise assim que a aplicação iniciar e para isso éramos obrigando a envolver essa promise em uma função. Agora basta chamar o await diretamente, sem envolver em uma função assíncrona.

Veja alguns exemplos tradicionais de se utilizar promises:

async function myPromise(){
	const response = await fetch('https://example.com')
}
myPromise()

Ou até chamar uma função auto executável.

( async ()=>{
	const response = await fetch('https://example.com')
})()

Agora observe mais um dos novos recursos do ECMAScript 2022, usando o await nos níveis superiores dos módulos.

const response = await fetch('https://example.com')

Repare que não precisamos colocar a promise com um async para conseguir esperar a resposta, basta colocar o await que vai funcionar normalmente à espera da promise.

Curso HTML5 + CSS3 - Fundamentos

Conhecer o curso

Atributos e métodos privados

Orientação a objetos é um paradigma de programação e nesse paradigma existe o encapsulamento que basicamente diz que métodos e atributos só devem ser visíveis dependendo da condição do objeto.

Você consegue ver todos os detalhes desse paradigma nesse artigo: Os pilares da orientação a objetos

No JavaScript não tínhamos uma forma de definir um atributo ou método privado de um objeto. Tínhamos que colocar um underscore para dizer que aquele valor era privado, mas isso não o tornava realmente privado, inacessível.

Observe o exemplo:

class Empresa{
	nome = 'Treinaweb'
	_cnpj = '99.999.999/0001-99'

	atualizarSalario(){
		return this._calcularSalario()
	}

	_calcularSalario(){
		return 1 + 1
	}
}
var empresa = new Empresa();
console.log(empresa._cnpj);
console.log(empresa_calcularSalario())
// Output: '99.999.999/0001-99'
// Output: '2'

No exemplo a cima foi acessível o valor do atributo e método, mesmo com o underscore

Agora com os novos recursos do ECMAScript 2022 podemos definir valores privados, tanto em métodos quanto em atributos.

class Empresa{
	nome = 'Treinaweb'
	#cnpj = '99.999.999/0001-99'
	
	atualizarSalario(){
		return this.#calcularSalario()
	}

	#calcularSalario(){
		return 1 + 1
	}
}
var empresa = new Empresa();
console.log(empresa.#cnpj);
// Output: undefined
// Output: undefined

Isso irá ocasionar um erro indicando que o valor não está acessível na classe ou objeto.

Os getters e setters (métodos assessores) seguem na mesma lógica.

class Empresa {
    nome = "Treinaweb";
    #cnpj = "99.999.999/0001-99";

    pagarConta() {
        return this.#calcularValorDaConta();
    }

  	get  #cnpj() {
        return this.#cnpj;
    }
}

Curso JavaScript - Trabalhando com web workers

Conhecer o curso

Métodos estáticos.

Definir valores estáticos faz com que o valor definido ocupe o mesmo lugar em memória e isso é ótimo quando quisermos ter um cache de um dado específico, o fazendo ser único em toda aplicação independente de quantas instancias da mesma classe existir.

Mais um dos novos recursos do ECMAScript 2022 é fazer com que os métodos assessores também sejam estáticos.

Observe um exemplo de como utilizar métodos assessores estáticos, possibilitando encapsulamento de atributos estáticos.

class Empresa {
    static #totalEmpresas = 0

    constructor() {
        Empresa.#totalEmpresas++
    }

    static get totalEmpresas() {
        return Empresa.#totalEmpresas
    }

}

let empresa1 = new Empresa();
let empresa2 = new Empresa();
console.log(Empresa.totalEmpresas);
// Output: 2

Observe um exemplo de como utilizar métodos estáticos de uma classe:

class Empresa {
    static rendaTotal = 0

    static adicionarRenda(valor) {
        Empresa.rendaTotal += valor
    }
}

Empresa.adicionarRenda(200)
Empresa.adicionarRenda(100)
console.log(Empresa.rendaTotal);
// Output: 300

Método para indexação relativa para strings e Arrays

Durante o desenvolvimento sentimos a necessidade de pegar a última posição de uma lista e para fazer isso tínhamos que criar códigos ruins de ler, principalmente quando tínhamos listas dentro de outra lista.

O código ficava aproximadamente dessa forma:

const myColors = ['red','blue', 'green']
const lastColor = myColors[myColors.length - 1]
console.log(lastColor)
// Output: green

Agora em mais um dos novos recursos do ECMAScript 2022 basta utilizarmos o método de lista at().

const myColors = ['red','blue', 'green']
const lastColor = myColors.at(-1)
console.log(lastColor)
// Output: green

O método at() também aceita números positivos, que podemos usar para acessar o índex da lista.

const myColors = ['red','blue', 'green']
const lastColor = myColors.at(0)
console.log(lastColor)
// Output: red

Propriedade `cause` em objetos de erro

Muitas vezes queremos tratar erros específicos e com os novos recursos do ECMAScript 2022 veio a propriedade cause do objeto Error, que registra uma cadeia de causalidade em erros e com isso podemos adicionais instruções especificas do erro.

Observe um exemplo de caso de uso:

async function getViaCep(cep) {
    try {
        const response = await fetch(`https://viacep.com.br/ws/${cep}/json/`)
        const data = await response.json();
    } catch (error) {
        throw new Error('Algo deu errado', { cause: error });
    }
}

try {
    await getViaCep('')
} catch (error) {
    console.log(error)
    //Error: Algo deu errado
    console.log(error.cause)
    // SyntaxError: Unexpected token < in JSON at position 0
}

Formação Desenvolvedor JavaScript

Conhecer a formação

O uso do Object.hasOwn

O Object.hasOwn funciona como uma alternativa para o Object.prototype.hasOwnProperty.

O modo tradicional usado era:

myObj = {
    prop: {}
};
Object.prototype.hasOwnProperty.call(myObj, 'prop')
// Output: true
Object.prototype.hasOwnProperty.call(myObj, 'toString')
// Output: false

/* ----------- */

Object.hasOwn(myObj, "prop")
// Output: true
Object.hasOwn(myObj, "toString")
// Output: false

Ambos os casos retornam um booleano indicando se o objeto possui a propriedade especificada como uma propriedade definida no próprio objeto em questão.

Mais informações em: object.hasOwn() e Object.prototype.hasOwnProperty()

Conclusão

Todos os anos há novos recursos e funcionalidades padronizados pelo Ecma desde a publicação da primeira edição em 1997. Neste post analisamos os principais pontos dos novos recursos ECMAScript 2022. Esperamos surpresas no próximo ano com as novidades do ECMAScript 2023.

Por fim, caso queira aprender mais sobre JavaScript e sua infinidade de recursos saiba que aqui na TreinaWeb temos cursos super completos que falam desde os fundamentos até as principais funcionalidades do Ecma.

Veja quais são os tópicos abordados durante o curso de Javascript - Avançado: