Entendendo o map(), filter() e reduce().
Continuando o artigo anterior, onde abordei o ForEach(), vou abordar agora os métodos map(), filter e o reduce().
map() :
O método map() transforma um array em outro array, para isso ele executa uma função callback para cada elemento do array original, alterando assim os elementos desse array que serão retornados para um novo array, ou seja, ele não altera o array atual, ele gera um novo array com o mesmo tamanho do array original porém com os elementos modificados pela função callback.
por exemplo:
filter() :
O método filter() como o nome já diz funciona como um filtro, retornando apenas os elementos que passaram no teste implementado na função callback fornecida. ele também não altera o array original , ele cria um novo array com cada elemento que retornaram true na função callback, outro detalhe é que a função callback não será chamada para elementos que estiverem vazios e os elementos que não passarem no teste serão simplesmente ignorados.
Vamos ver no exemplo abaixo, onde temos um array de objetos “carros” onde queremos retornar apenas os carros com combustível flex:
reduce() :
O reduce() “reduz” um array a um valor único. por exemplo se precisarmos achar a soma de todos os valores de um array, mas ele não é tão simples assim, ele é parecido com o map() e o filter() porém os argumentos da callback são diferentes, no reduce() a callback agora recebe o Acumulador, Valor Atual, Índice Atual e o próprio Array.
- Acumulador (obrigatório) : ele acumula todos os valores do retorno, ou seja a cada iteração ele soma o seu valor ao valor atual. (obs: podemos passar um Valor inicial também, mas caso o Valor Inicial não tiver sido passado como argumento, então o Acumulador será igual ao primeiro valor no array e o Valor Atual será igual ao segundo.)
- Valor Atual (obrigatório): É o valor que esta no elemento atual do Array.
- Índice Atual (não obrigatório): É o Índice do que esta sendo percorrido no momento.
- Array Original (não obrigatório): É o próprio array onde estão ocorrendo as iterações
como podemos ver no exemplo acima, não definimos um valor inicial para o acumulador, dessa forma o primeiro índice do array (soma[0]), se tornou o Acumulador, e o segundo índice (soma[1]) se tornou o Valor Inicial. como se já houvesse acontecido uma iteração, e tambem podemos observar que na primeira iteração o Índice Atual já começa no 1 (soma[1]), ou seja o segundo elemento do array, porque o primeiro já se tornou o acumulador.
agora vamos ver o mesmo caso colocando um Valor Inicial, para colocarmos o valor inicial devemos inserir esse valor após a callback na chamada do método reduce().
vamos ver como fica no exemplo abaixo:
como podemos ver acima, o acumulador começou com o valor inicial que definimos (10), logo o valor atual se tornou o primeiro índice do array (soma[0]).
Bomm pessoal, foram exemplos bem simples mas acho que deu pra começar a entender um pouco mais sobre esses métodos.
Espero ter ajudado e até o próximo artigo!
Bibliografia:
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/map
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
