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

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:

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.

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:

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.

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