Participe da Maratona Behind the Code! Prêmios e desafios incríveis te esperam, não perca! Inscreva-se aqui

5 features do ES6

Cinco features do ES6

Isso é uma lista de 5 das minhas features favoritas do ECMAScript 6 (ou ES6).

São pequenos “pedaços” de código que eu considero simples, porém, super incríveis e úteis.

Você pode ver os códigos fonte nesse repositório, testar no copen e compartilhar as imagens (SVG e PNG) dos códigos, se quiserem. É tudo free, não tem direito autoral e esse repositório está na licença MIT.

Dica: Quando vir os exemplos no codepen, lembre de abrir a aba de console pra ver os resultados.

Sem mais delongas, aqui vai o número #1.

#1 Arrays com valores únicos

código mostrando arrays com valores únicos

Código | Codepen

Fazer um array ter valores únicos é algo muito útil. O que antes requeria fazer loops usando for, forEach ou qualquer outra maneira que pede várias linhas de código, agora está muito simples com ES6.

Nesse exemplo, temos numbersArray com o valor 1 e 2 repetidos. Convertendo ele em tipo Set, faz com que os valores repetidos sejam automaticamente deletados. Depois disso, temos que converte-los de volta para array usando Array.from().

Feito isso, você tem um belo array sem nenhum valor repetido usando as magias do Set().

E se você é desses que gosta de escrever tudo em uma linha para impressionar, você pode combinar os dois:

Array.from(new Set([1, 2, 2, 1, 1]))

Leia mais sobre Set

#2 Clonando objetos com Spread Operator

código clonando objetos com spread operator

Código | Codepen

A dica #2 é sobre clonar objetos. Para evitar o comportamento de referenciação do JavaScript, é comum que se precise clonar objetos. A maneira mais usada anteriormente era o famoso Object.assign(). Para evitar esse medonho e verboso método, uma maneira muito mais simples e legível de se clonar um objeto é usando o famoso “Três pontinhos”, o Spread Operator.

Em suma, o que basicamente acontece com o spread é: ele vai item a item do seu Array ou, nesse caso, Objeto, e atribui os mesmos valores. O resultado é um Objeto novo e desvinculado do Objeto inicial, assim, evitamos bugs com valores inesperados.

#3 Usando Template String e acessando objetos com Destructuring

Código Usando Template String e acessando objetos com Destructuring

Código | Codepen

Aqui temos duas features:

• Template String: é uma maneira de declarar uma String e interpolar valores de uma maneira muito mais legível. Basta usar o “backtick” ao invés de aspas e envolver o valor em ${}.

• Destructuring ou Desestruturação: Trata-se de forma diferente de acessar propriedades de Obejtos ou itens de Arrays. Você consegue declarar variáveis com o nome da propriedade interna do objeto diretamente. Isso deixa o código menos verboso e muito mais legível.

Leia mais sobre Atribuição via desestruturação

Leia mais sobre Template Strings

#4 Somando total de valores de objeto com Reduce

código Somando total de valores de objeto com Reduce

Código | Codepen

Essa é das features a que mais me confundiu no início, porém, quanto mais eu uso mais eu gosto: Reduce.

Com o reduce conseguimos fazer um loop em um Array e ir incrementando um valor inicial a cada iteração. Tudo isso, numa syntax bem poderosa.

O método reduce tem dois parâmetros. O primeiro acc é o acumulador (acc = accumulator). Ele precisa ser iniciado com algum valor, no nosso caso: 0. O segundo é cada item do loop que estamos fazendo, nesse exemplo, um Objeto { title: ‘…’, value: … }.

A gente, então, começa com o valor em 0 e, a partir daí, somamos com a propriedade value do Objeto atual de cada iteração. É um dos meus métodos preferidos e as possibilidades são muitas.

Leia mais sobre Reduce

#5 Pegando dados de API com o método Fetch usando Async / Await

código Pegando dados de API com o método Fetch usando Async / Await

Código | Codepen

Deixei o meu preferido por último. Async Await com a API Fetch do browser.

Aqui, a gente faz uma busca na API pública do GitHub. Usamos o endpoint que retorna algumas informações sobre um usuário do GitHub, buscando pelo seu username.

O método fetch, é um método assíncrono, então, ele retorna uma Promise. Isso por si só já é incrível e eu podia parar por aqui, mas, vamos além.

Aqui, a gente combina o Async / Await que, basicamente, nos permite um approach síncrono com Promises. O que isso faz é permitir que usemos declarações da direita pra esquerda e atribuir valores do retorno de uma Promise em uma variável da maneira que faríamos proceduralmente (sincronamente).

Pra isso, basta declarar o async antes da sua função e await antes da chamada que se espera um retorno de uma Primise e pronto.

Essas duas features são, de longe, as que eu mais gosto no ECMAScript 6 e espero que vocês tenham gostado também.

Leia mais sobre Fetch

Leia mais sobre Async / Await

É isso

Essas foram minhas 5 features, e espero que tenham gostado da leitura.

Mandem Pull Requests no repositório desse artigo se tiverem uma sugestão.

Agradeço muito o seu tempo. Tenha um ótimo dia / tarde / noite!

Thanks and bye!

Referências

Imagens criadas com Carbon

Licença

Este código é liberado sob a licença MIT (MIT)