Neste poste, você vai aprender com o dataholic Michel Oliveira, como o map(), filter() e reduce() trabalham, como usá-los, e como eles são implementados. Pega a caneta e vem conferir!
Se você começou a estudar JavaScript agora, ou se já estuda a um tempo, você já deve ter ouvido falar da “trindade” do JavaScript: map, filter e reducer. Estes são uns dos métodos mais importantes do JavaScript, eles nos permitem iterar pelo conteúdo de um array, semelhante a usar um loop for . Cada um desses métodos criará um novo array (ou elemento, objeto, etc.) com base na função callback fornecida, e eles não mudarão ou alterarão o array original.
Por que você deve usar map, filter ou reducer em vez de um loop for?
Nos permite criar códigos mais legíveis.
São mais rápidos para serem escritos.
Facilita no encadeamento de outros métodos.
Não alteram o array original.
Array.map()
Invoca a função callback passada por argumento para cada elemento do Array e devolve um novo Array como resultado. Essa função de callback pode receber até três argumentos:
elemento - O valor do elemento original do array de origem.
index (opcional) - O índice do elemento atual que está sendo processado no array.
array (opcional) - O Array de origem
Descrição
O método map chama a função callback recebida por parâmetro para cada elemento do array original, e constrói um novo array com base nos retornos de cada chamada. A função callback é chamada apenas para os elementos do array original que tiverem valores atribuídos; os elementos undefined, ou removidos, ou os que nunca tiveram valores atribuídos, não serão considerados.
O método map não modifica o array original. Mas, a função callback invocada por ele, pode fazê-lo.
Quando não usar o map()
Como map o cria um novo array, usá-lo quando você não está usando o array retornado é uma má pratica; use forEach ou for...of em vez disso.
Exemplo
O código a seguir mapeia um array de números e cria um novo array contendo o valor do elemento elevado a 2 de cada número do primeiro array.
Note que no exemplo acima, eu não passei os argumentos index e array, pois como eu disse são opcionais, existem caso que você vai precisar passa-los, mas na maioria das vezes não será necessário.
Array.filter()
Cria um novo array com todos os elementos que passaram no teste implementado pela função fornecida.
Essa função é um predicado para testar cada elemento do array. Retorna um valor que resolve para true para manter o elemento, ou false para não manter. Assim como no map() a callback do filter() pode receber o element, index e o array.
Sendo assim, filter() chama a função callback fornecida, uma vez para cada elemento do array, e constrói um novo array com todos os valores para os quais o callback retornou o valor true, ou um valor que seja convertido para true. O callback é chamado apenas para índices do array que possuem valores atribuídos; Ele não é invocado para índices que foram excluídos ou para aqueles que não tiveram valor atribuído. Elementos do array que não passaram no teste do callback são simplesmente ignorados, e não são incluídos no novo array.
Exemplo
O exemplo a seguir usa filter() para criar um array filtrado em que todos os elementos com valores menores que 10 são removidos.
Note que no exemplo acima, assim como no map() eu não passei os argumentos index e array, pois como eu disse são opcionais, existem casos que você vai precisar passa-los, mas na maioria das vezes não será necessário.
Array.reduce()
Executa uma função de callback “reducer” fornecida pelo usuário em cada elemento da matriz, passando o valor de retorno do cálculo no elemento anterior. Resultando num único valor de retorno.
Na primeira vez que o callback é executado, não há "valor de retorno do cálculo anterior". Se fornecido, um valor inicial pode ser usado em seu lugar. Caso contrário, o elemento de matriz 0 é usado como o valor inicial e a interação começa a partir do próximo elemento (índice 1 em vez de índice 0).
O reduce() recebe até três parâmetros:
callback
Uma função de callback que é executada em cada valor no array (exceto no primeiro, se nenhum valor inicial “initialValue” for passado); recebe quatro argumentos:
previousValue - valor retornado da última iteração. Na primeira iteração esse argumento receberá o initialValue, se ele for informado;
currentValue - o valor atual que está sendo processado pelo array;
currentIndex - o índice atual do item no array de origem;
array - o array original;
accumulator (opcional)
O índice do elemento atual que está sendo processado no array. Começa a partir do index 0 se um (initialValue) for fornecido. Do contrário, começa do index 1.
InitialValue (opcional)
Valor inicial do resultado da operação que será passado para a função de callback na primeira iteração. Em um cenário no qual desejamos somar os itens de um array, por exemplo, esse argumento representa o valor inicial da soma, que apesar de ser zero na maioria dos casos, pode variar de acordo com a situação. Por exemplo, podemos desejar somar os elementos de mais de um array. Nesse caso, o resultado da soma do primeiro poderia ser passado como initialValue para o segundo, e então a nova soma seria acumulada na segunda função. Esse argumento, no entanto, é opcional.
Exemplo
O exemplo a seguir usa reduce() para somar todos os elementos do array.
Observe que no exemplo acima, eu não passei o initialValue, nesse caso não tem problema, pois o array tem elementos. No entando, caso o array esteja vazio, isso causaria um erro. Por tanto, é bom que passe um initialValue.
Veja um exemplo com o uso do initialValue; supomos que temos 2 arrays, um com os gastos de maio e um com os gastos de junho e queremos somar os dois arrays para descobrir o total de gastos dos dois meses. Podemos então aplicar um reduce() no array de maio e somar seus valores, e passar o valor obtido como initialValue do reduce() para o mês de junho, veja como fica o código:
No exemplo acima o totalMay foi passado como valor inicial para o reduce() do juneExpenses, ou seja, a soma começou com 180 e fechou com 655 dos dois meses.
Baseado no que vimos, você pode aplicar map() - Se deseja aplicar a função de callback a cada elemento do array; filter() - Se deseja filtrar elementos do array baseado em alguma condição; e reduce() - Se deseja fazer algum cálculo com os valores do array, para retornar soma dos valores por exemplo.