JavaScript: Conhecendo map(), filter() e reduce()

Thiago S. Adriano

Dando continuidade ao meu artigo anterior, onde demonstrei a diferença entre Map & forEach, vejamos agora um outro exemplo com map(), filter() e reduce().

capa JavaScript (map() — filter() — reduce())

Para os nossos exemplos, iremos utilizar o seguinte array de objetos contendo: nome, idade e tipo.

data = [
{
name: 'Butters',
age: 3,
type: 'dog'
},
{
name: 'Lizzy',
age: 6,
type: 'dog'
},
{
name: 'Red',
age: 1,
type: 'cat'
},
{
name: 'Joey',
age: 3,
type: 'dog'
},
];

Agora, para que você possa ter um bom entendimento, vamos criar os exemplos abaixo:

  • Selecionar apenas os cachorros
  • Retornar a idade real de cada cachorro
  • Somar a idade de todos os cachorros juntos

Selecionar apenas os cachorros

Para retornar somente os animais de um determinado tipo dentro do nosso array, nós iremos utilizar o método filter(). Como o próprio nome diz, ele filtra os dados de um array por um determinado valor. Veja abaixo como podemos utilizar ele para retornar os animais que estão com o tipo dog no nosso array.

let dogs = data.filter((animal) => {
return animal.type === 'dog';
})

Podemos ver o resultado da execução desse código na imagem abaixo:

filter()

Retornar a idade real de cada cachorro

Agora que nós já adicionamos um filtro para o nosso array, vamos ao nosso segundo exemplo, onde devemos retornar a idade real de cada cachorro. Para isso, iremos utilizar o método map() para multiplicar a idade de cada um deles por 7. Podemos ver abaixo um exemplo demonstrando esse passo e o seu o resultado.

map()

Somar a idade de todos os cachorros

Nosso próximo passo será retornar a idade de todos os cachorros. Para isso, iremos utilizar o método reduce(). Veja abaixo um trecho de código demonstrando esse exemplo:

var calcAge = dogs.reduce((sum, animal) => {
return sum + animal.age;
}, 0);
console.log(calcAge);

Podemos ver o seu resultado na imagem abaixo:

resultado reduce()

Como você pode notar, o reduce() trabalha que nem o map(),ele percorre o array invocando uma função de retorno em cada elemento. O valor retornado é um valor acumulado passado de callback para callback. Depois de todos os elementos terem sido avaliados, ele retorna o valor acumulado ou concatenado.

Para finalizar, veja abaixo um exemplo mais detalhado do reduce():

array.reduce( function( prevVal, elem, index, array ) {
...
}, initialValue );
  • prevVal:Valor cumulado retornado em cada iteração
  • elem:Valor do elemento
  • indexÍndice em cada iteração, da esquerda para a direita
  • arrayArray original invocando o método
  • initialValue(opcional) Objeto usado como primeiro argumento na primeira iteração (mais à esquerda)

Com isso finalizamos os nossos exemplos, espero que tenham gostado e até um próximo artigo.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade