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 doasync
. - 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 paraObject.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 Kotlin - Fundamentos
Conhecer o cursoAtributos 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 React Native - Armazenamento de arquivos com Firebase Storage
Conhecer o cursoMé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çãoO 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:
- Internacionalização;
- Promises, Iterators/Generators, Async/Await;
- Requisições com Fetch;
- Módulos;
- Web Workers;
- Proxy e Reflect;
- Armazenamento de dados com LocalStorage, SessionStorage e IndexedDB;
- O que são Frameworks;
- Conhecendo a aplicação do JavaScript além do navegador.