O Poder dos Métodos Auxiliares de Array usando ES6
Quem trabalha com Javascript sabe que realizar operações com arrays de objetos é uma atividade essencial no mundo da programação, e com ES6 isso se tornou mais fácil, pois nos permite escrever códigos mais legíveis e fáceis de dar manutenção.
ECMAScript
Antes de entrar no tema principal é importante entender o que é ECMAScript (ES) e qual a sua relação com o Javascript. De forma resumida ES é uma especificação de linguagem de scripts padronizada pela ECMA-262 na qual o Javascript implementa, para mais informações acesse aqui.
Métodos Auxiliares
Existe uma infinidade de métodos auxiliares para array, porém neste post iremos ver os mais utilizados:
- ForEach
- Map
- Filter
- Find
- Every
- Some
- Reduce
Os métodos auxiliares funcionam de forma muito semelhante, porém cada um tem um propósito diferente. Além disso esses métodos substituem a forma clássica de interação, onde muitas vezes usávamos um laço de repetição for acompanhado de um pouco de lógica de programação para obter um resultado de operações básicas no dia a dia, como por exemplo uma soma.
Durante os exemplos, irei compartilhar as implementações de como fazíamos sem o ES6 e como podemos melhorar esse código usando ES6.
Chega de papo e vamos lá …
ForEach
Este método auxiliar funciona muito bem quando precisamos percorrer todos os elementos de um objeto.
Exemplo: Imagine que precisamos mostrar os Shampoo favoritos de um usuário, esta implementação pode ser feita das seguintes formas:
Perceba que invocando a função foreach no array passamos como parâmetro uma função callback que recebe uma variável. Quem cuida do laço a ser executado é o próprio foreach e, para cada interação do array a função de callback é acionada. Com o foreach conseguimos o mesmo resultado em uma linha de código.
Map
O Método Map é muito útil quando precisamos percorrer um array e modificá-los.
Exemplo: Imagine que precisamos mostrar uma lista de produtos com desconto aplicado, esta implementação pode ser feita das seguintes formas:
Invocando a função Map temos menos linhas de código, isso pois com o map não precisamos controlar a posição do objeto a ser acessado, além disso a função retorna um novo array de objetos, mantendo a integridade do array original.
Filter
Esse método é muito utilizado quando queremos filtrar a nossa lista de acordo com um critério.
Exemplo: Imagine que precisamos mostrar somente os produtos a partir de 40 reais, esta implementação pode ser feita das seguintes formas:
Dentro da função filter usamos uma condição booleana (linha 22), para verificar o critério, caso a condição seja verdadeira, o item é add no array de retorno. Porém se nenhuma condição for verdadeira o retorno será um array vazio.
Find
O Método Find é muito semelhante ao Filter, porém ele retorna sempre o primeiro item encontrado conforme o critério informado.
Exemplo: Imagine que precisamos mostrar o produto " kit Eume Hidratação", esta implementação pode ser feita das seguintes formas:
Dentro da função find usamos uma condição booleana (linha 21) para verificar se o elemento corresponde ao critério, caso a condição seja verdadeira o valor é retornado e função finalizada. Porém se nenhuma condição for verdadeiro o retorno será undefined.
Every
Diferente das funções que temos visto, a função every retorna um valor booleano e não um array. Esta função verifica se todos os elementos do array possuem o critério informado.
Exemplo: Imagine que precisamos verificar se todos os produtos de uma lista possuem frete grátis, esta implementação pode ser feita das seguintes formas:
Dentro da função every usamos uma condição booleana (linha 20) para verificar se todos os produtos possuem frete grátis, caso 1 produto não possua frete grátis, o retorno sera false.
Neste exemplo o retorno é false, pois não são todos os produtos que possuem frete grátis, porém se todos os produtos tivessem frete grátis o retorno seria true.
Some
Some é parecido com o Every, porém a função irá retorna true, caso exista pelo menos um item no array com condição verdadeira.
Exemplo: Imagine que precisamos verificar se existe pelo menos um produto com frete grátis, esta implementação pode ser feita das seguintes formas:
Neste exemplo o retorno será true, pois existe pelos menos um produto com frete grátis.
Reduce
O Objetivo do Reduce é percorrer por cada elemento de uma lista com o objetivo de ao final gerar um único valor. Um bom caso de uso para entendermos o comportamento dele é realizar a soma de um array.
Exemplo: Imagine que precisamos mostrar o valor total de uma lista de produtos, esta implementação pode ser feita das seguintes formas:
A função Reduce neste contexto recebe dois parâmetros: callback e initial value que é 0 (linha 17).
A função de Callback possui os seguintes parâmetros:
- totalValue: Essa variável irá conter o valor retornado na função de callback, que no nosso caso é a soma dos produtos, ou seja a cada interação será realizado a soma do produto com base nas linhas percorridas no array , essa soma será atribuída a variável total value.
Na primeira interação do array seu valor será 0, pois definimos isso na linha 17. - product: receberá o item do array, conforme a posição do laço.
A saída final será de 165.29 que é a soma total dos produtos.
Um ponto importante a entender sobre os métodos auxiliares, é que caso seja adicionado um novo item ao array ou até mesmo alterado uma informação durante a execução dos métodos auxiliares, essa alteração será refletida no array, porém não sera processada pelo métodos auxiliar.
Exemplo:
Conclusão
Com a inserção dos métodos auxiliares, ficou muito mais fácil e prático trabalhar com arrays, além de reduzir o numero de linhas de código é também uma forma de escrever códigos mais legíveis.
Ficou com dúvida? comenta aqui, vou adorar responder você :)
Até a próxima ✌️
