Faaaaala galera, tudo certo? Não poderia faltar um post sobre as novas features do ES12 aqui no blog, né? Então sem enrolação, bora lá passar pelas principais features!
\nEu ouvi um amém? Huahuaha.
\nFinalmente um método nativo para isso! Chega de gambiarras com loop.
O que o replaceAll() faz é retornar uma nova String com todas as ocorrências de um padrão substituídas por um determinado caractere.
Oooou seja, ele faz exatamente o que o replace() faz, mas agora percorrendo e substituindo todas as strings correspondentes. Muito mágico, né?
Para entendermos a diferença, bora ver um exemplo do método replace() primeiro:
// Exemplo replace()\nconst minhaString = \"Gian é o cara do Back-End! Ele ama muito Back-End!\";\nconst novaString = minhaString.replace(\"Back\", \"Front\");\nconsole.log(novaString); \n// \"Gian é o cara do Front-End! Ele ama muito Back-End!\"Perceba que apenas a primeira ocorrência da String \"Back\" foi substituída. Not cool, buddy >:(
Agora um exemplo com replaceAll():
// Exemplo replaceAll()\nconst minhaString = \"Gian é o cara do Back-End! Ele ama muito Back-End!\";\nconst novaString = minhaString.replaceAll(\"Back\", \"Front\");\nconsole.log(novaString); \n// \"Gian é o cara do Front-End! Ele ama muito Front-End!\"Outra dica legal é que da para concatenar o método replaceAll() numa String, assim você pode determinar na mesma linha vários padrões que deseja substituir na String. Mas cuidado, repense se essa solução é de fato a solução ideal, fechou? Bora pra próxima xD.
\n\nAcessadores, Gian? Sério?
\n
Pois é meu querido, acredite ou não essa é a palavra em português adotada pela MDN para representar os Accessors. Doido, né?
\nAgora podemos definir um método como privado utilizando o caractere # antes de seu nome. Simples assim, agora você tem um método que só pode ser acessado dentro da classe em que foi definido. Magic!
Se liga no exemplo:
\nclass Pessoa {\n\n // Metodo privado\n #metodoPrivadoMuitoLouco() {\n console.log(\"Eu sou privado, hehehe\");\n }\n\n // Metodo público\n metodoPublicoComum() {\n this.#metodoPrivadoMuitoLouco();\n }\n\n}\n\nconst objetoDePessoa = new Pessoa();\nobjetoDePessoa.metodoPublicoComum(); // \"Eu sou privado, hehehe\";\nobjetoDePessoa.metodoPrivadoMuitoLouco(); // TypeError: objetoDePessoa.metodoPrivadoMuitoLouco is not a functionAlém do método, também é possível definir acessadores com a mesma sintaxe, confere o exemplo:
\nclass Pessoa {\n // Acessador público\n get nome() { return \"Gian\" }\n set nome(value) {}\n\n // Acessador privado\n get #idade() { return 19 }\n set #idade(value) {}\n}\nconst objetoDePessoa = new Pessoa();\nconsole.log(objetoDePessoa.nome); // \"Gian\"\nconsole.log(objetoDePessoa.idade); // undefinedPara fechar com chave de ouro: a cereja do bolo!
\nEssa feature é animal, ela combina os operadores lógicos (&&, ||, ??) com atribuição. Parece complexo mas é super simples, bora lá para um exemplo:
let x = 1;\nlet y = 2;\nx &&= y;\nconsole.log(x); // 2\n\nGian, o que diacho a linha 3 faz?
\n
Vamos lá, haha. Como x é um valor válido, ele é atribuído com o valor de y, ou seja, 2.
Então a linha 3 pode ser traduzida para:
\nif(x) {\n x = y\n}Muito legal, né?
\nAlém do &&, o mesmo pode ser feito com || e ?? (que é o operador de coalescência nula, que checa se o valor é null ou undefined, bem útil!).
let x = 1;\nlet y = 2;\nx ||= y;\nconsole.log(x); // 1\n\n// ---------------------------------\n\nlet x;\nlet y = 2;\nx ??= y;\nconsole.log(x); // 2Estes exemplos podem ser traduzidos por:
\nx || (x = y)\n\n// ---------------------------------\n\nx = x ?? (x = y)Muito legal, assim conseguimos economizar algumas linhas de código! xD.
\nIsso sim que são novas features! Confesso que esperava algumas delas logo no ES2020, mas antes tarde do que nunca, né?
\nNo post abordei de forma super simplificada algumas features que julguei serem as mais legais. Ainda não temos muito conteúdo pt-br sobre o ES12, então caso você saiba um pouco de inglês eu super recomendo o post do Backbencher, nele são citadas e explicadas todas as features. Eu inclusive usei esse material como consulta para esse post, então não esquece de conferir, ok? ;).
\nLembrando que a área de comentários é livre para qualquer discussão sobre o post, então use e abuse dela, fechou?
\nPor hoje é só, obrigado por me acompanhar até aqui! Nos vemos semana que vem xD.
","timeToRead":3}},"pageContext":{"slug":"/novas-features-do-es2021-es12/","previousPost":{"frontmatter":{"title":"Extensões super hiper legais para VSCode"},"fields":{"slug":"/extensões-super-hiper-legais-para-vscode/"}},"nextPost":{"fields":{"slug":"/git-hooks-com-husky-entendendo-configurando-e-aplicando/"},"frontmatter":{"title":"Git Hooks com Husky: entendendo, configurando e aplicando."}}}},"staticQueryHashes":["1246478059","1873617545","764694655"]}