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


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:

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.

Compartilhe:

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn

Table of Contents

Postagens Relacionadas

Maze Runner – Correr ou Morrer

Maze Runner – Correr ou Morrer O filme mostra o jovem Thomas (Dylan O’Brien), que vai parar em um lugar desconhecido, sem memória que o
TheWildsVidasSelvagens

the wilds: vidas selvagens

The Wilds: Vidas Selvagens The Wilds: Vidas Selvagens é uma série dramática de TV americana criada por Sarah Streicher que foi lançada no Prime Video
RockBottomRiser

Rock Bottom Riser

Rock Bottom Riser 01/03/2021(US) – Documentário – 1h 10min –   Nota: 0/10   Sinopse     Elenco Nainoa Thompson Como – master navigator Moses
SaferatHome

Safer at Home

Safer at Home 26/02/2021(US) – Filmes – 0h 0min –   Nota: 0/10   Sinopse     Elenco Mais informações Título Original Safer at Home