Novos recursos do ECMAScript 2022 \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 13 Horas 43 Min 21 Seg Tempo restante da oferta: 13 43 21 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Novos recursos do ECMAScript 2022 [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) # Novos recursos do ECMAScript 2022 Novos recursos do ECMAScript 2022 que é a décima terceira edição da especificação que vai padronizar tudo no mundo do JavaScript. [ Ariel Sardinha ](https://www.treinaweb.com.br/blog/autor/ariel-sardinha) 4 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/07/novos-recursos-do-ecmascript-2022.png) 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. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-COMECANDO-JS.png) ](https://www.treinaweb.com.br/ebook/guia-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?](https://www.treinaweb.com.br/blog/qual-a-diferenca-entre-ecmascript-e-javascript "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: ```Javascript async function myPromise(){ const response = await fetch('https://example.com') } myPromise() ``` Ou até chamar uma função auto executável. ```Javascript ( 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. ```Javascript 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. [ ![JQuery Completo](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/jquery.svg) Curso JQuery Completo Conhecer o curso ](https://www.treinaweb.com.br/curso/jquery) ## 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](https://www.treinaweb.com.br/blog/os-pilares-da-orientacao-a-objetos "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: ```javascript 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. ```javascript 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. ```javascript class Empresa { nome = "Treinaweb"; #cnpj = "99.999.999/0001-99"; pagarConta() { return this.#calcularValorDaConta(); } get #cnpj() { return this.#cnpj; } } ``` [ ![PWA - Progressive Web Apps](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/pwa.svg) Curso PWA - Progressive Web Apps Conhecer o curso ](https://www.treinaweb.com.br/curso/progressive-web-apps) ### 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. ```javascript 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: ```javascript 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: ```javascript 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()`. ```javascript 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. ```javascript 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: ```javascript 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 } ``` [ ![Desenvolvedor JavaScript](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/javascript.svg) Formação Desenvolvedor JavaScript Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-javascript) ## O uso do Object.hasOwn O `Object.hasOwn` funciona como uma alternativa para o `Object.prototype.hasOwnProperty`. O modo tradicional usado era: ```javascript 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()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn "object.hasOwn()")** e **[Object.prototype.hasOwnProperty()](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object/HasOwnProperty "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](https://www.treinaweb.com.br/busca?q=javascript) e sua infinidade de recursos saiba que aqui na [TreinaWeb](https://www.treinaweb.com.br/) 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](https://www.treinaweb.com.br/curso/javascript-avancado): - 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. - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #ECMAScript ](https://www.treinaweb.com.br/blog/tag/ecmascript) - [ #ECMAScript 2022 ](https://www.treinaweb.com.br/blog/tag/ecmascript-2022) Autor ![Ariel Sardinha](//secure.gravatar.com/avatar/d0b89ee09026eb2b9e26f286c04eba03?d=mm) ## Ariel Sardinha Professor e desenvolvedor. Formando em engenharia de software e Computação - Licenciatura. É autor de cursos em diversos temas, como, desenvolvimento front-end, Flutter, JavaScript, React,js e Vue.js. Nas horas vagas adora estudar sobre tecnologia, filmes e brincar com a pequena Maria Eduarda. [arielsardinha](https://www.linkedin.com/in/ariel-sardinha/) [Todos os artigos](https://www.treinaweb.com.br/blog/autor/ariel-sardinha) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/08/07161700/gerenciamento-python-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 4 anos atrás ## [ Empacotando e publicando pacotes Python no PyPi ](https://www.treinaweb.com.br/blog/empacotando-e-publicando-pacotes-python-no-pypi) Neste artigo iremos aprender como funciona o processo de empacotar e distribuir nossos próprios pacotes Python no PyPi. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/05/03175136/NET-CORE-2.1-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 8 anos atrás ## [ Novos recursos do ASP.NET Core 2.1 ](https://www.treinaweb.com.br/blog/novos-recursos-do-asp-net-core-2-1) Conheça os novos recursos do ASP.NET Core 2.1. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/05/O-QUE-E-PHP-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 5 anos atrás ## [ Guia da linguagem PHP ](https://www.treinaweb.com.br/blog/guia-da-linguagem-php) Nesse guia de PHP você aprenderá o necessário para criar os seus primeiros softwares com a linguagem de programação PHP. Acesse agora mesmo! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/07/DICA-CODIGO-PHP-400x280.jpg) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 3 anos atrás ## [ Dica de Código: Propriedades Somente Leitura no PHP ](https://www.treinaweb.com.br/blog/dica-de-codigo-propriedades-somente-leitura-no-php) Descubra como utilizar as propriedades somente leitura no PHP 8.1 para criar código mais seguro e confiável. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/11/27101528/NOVIDADES-WORDPRESS-400x280.png) [ WordPress ](https://www.treinaweb.com.br/blog/categoria/wordpress) 9 anos atrás ## [ Novidades do WordPress 4.9 ](https://www.treinaweb.com.br/blog/novidades-wordpress-4-9) Veja as novidades do WordPress 4.9, lançado no dia 16 de novembro. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/07/DICA-CODIGO-PHP-400x280.jpg) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 3 anos atrás ## [ Dica de Código: Enums no PHP ](https://www.treinaweb.com.br/blog/dica-de-codigo-enums-no-php) Descubra como os enums no PHP podem transformar seu código, tornando-o mais claro e eficiente. Otimize seu código agora! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/02/17151508/php-elefante-ponte-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ Tipos no PHP ](https://www.treinaweb.com.br/blog/tipos-no-php) Nesse post explicamos com exemplos tudo o que você precisa saber sobre definição de tipos em parâmetros e retornos de funções e métodos no PHP, além do novo recurso de propriedades de classes tipadas do PHP 7.4. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/enviando-e-mails-no-asp-net-core-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 6 anos atrás ## [ Enviando e-mails no ASP.NET Core ](https://www.treinaweb.com.br/blog/enviando-e-mails-no-asp-net-core) O .NET possui um módulo nativo para o envio de e-mails. Entretanto, veja como facilitar este processo utilizando a biblioteca Coravel. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/06/utilizando-o-firebase-authentication-em-uma-aplicacao-android-400x280.png) [ Android ](https://www.treinaweb.com.br/blog/categoria/android) 10 anos atrás ## [ Utilizando o Firebase Authentication em uma aplicação Android ](https://www.treinaweb.com.br/blog/utilizando-o-firebase-authentication-em-uma-aplicacao-android) Veja como implementar o Firebase Authentication em uma aplicação Android, usando o Android Studio. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/10/o-que-e-e-como-comecar-com-golang-400x280.jpg) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Entendendo ponteiros na Golang ](https://www.treinaweb.com.br/blog/entendendo-ponteiros-na-golang) Neste artigo veremos sobre os ponteiros na Golang. Vamos entender o que são ponteiros, quais suas vantagens e desvantagens e como utilizá-los. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/10/01110647/strapi-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 8 anos atrás ## [ Criando APIs com o Strapi.io ](https://www.treinaweb.com.br/blog/criando-apis-com-o-strapi-io) Veja neste artigo como criar APIs de forma rápida e fácil utilizando o Strapi.io. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/09/conheca-as-novidades-que-estao-por-vir-no-android-studio-3-400x280.jpg) [ Android ](https://www.treinaweb.com.br/blog/categoria/android) 9 anos atrás ## [ Conheça as novidades que estão por vir no Android Studio 3.0 ](https://www.treinaweb.com.br/blog/conheca-as-novidades-que-estao-por-vir-no-android-studio-3) Veja as principais novidades e atualizações que a equipe de desenvolvedores do Android Studio preparou para a versão 3.0. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **13h 43min 21s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58