Olá a todos! hoje iremos falar sobre map, filter e reduce utilizando javascript.
Imagine que temos o seguinte conjunto de dados:
const carros = [
{
nome: 'Onix',
motor: 1.0,
fabricante: 'Chevrolet',
kmRodados: 10010,
lancamento: 2019
},
{
nome: 'Kwid',
motor: 1.0,
fabricante: 'Renault',
kmRodados: 10000,
lancamento: 2018
},
{
nome: 'Up!',
motor: 1.0,
fabricante: 'Volkswagen',
kmRodados: 100000,
lancamento: 2017
},
{
nome: 'Sandero',
motor: 1.6,
fabricante: 'Renault',
kmRodados: 20000,
lancamento: 2018
},
{
nome: 'Uno',
motor: 1.0,
fabricante: 'Fiat',
kmRodados: 20500,
lancamento: 2000
}
]
Map:
The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
texto retirado de developer.mozilla.org
E como isso funciona? Vamos imaginar o nosso array de objetos com informações sobre carros acima. Recebemos uma tarefa que é necessário multiplicar por dois todos os valores de quilômetros rodados dos carros. Nesta situação, podemos utilizar o map porque este método percorre todos os valores do nosso array e utiliza nossa função de callback para cada elemento.
carros.map(el => {
// Multiplica valor do objeto e atribui a variável do objeto
el.kmRodados *= 2;
return el;
})
Temos nosso array de carros modificado:
[
{
nome: 'Onix',
motor: 1.0,
fabricante: 'Chevrolet',
kmRodados: 20020,
lancamento: 2019
},
{
nome: 'Kwid',
motor: 1.0,
fabricante: 'Renault',
kmRodados: 20000,
lancamento: 2018
},
{
nome: 'Up!',
motor: 1.0,
fabricante: 'Volkswagen',
kmRodados: 200000,
lancamento: 2017
},
{
nome: 'Sandero',
motor: 1.6,
fabricante: 'Renault',
kmRodados: 40000,
lancamento: 2018
},
{
nome: 'Uno',
motor: 1.0,
fabricante: 'Fiat',
kmRodados: 41000,
lancamento: 2000
}
]
Filter:
The filter() method creates a new array with all elements that pass the test implemented by the provided function.
texto retirado de developer.mozilla.org
O método filter retorna um novo array com base nos valores que retornarem true do método passado como callback. Utilizando nosso array de carro, vamos filtrar para os carros que foram lançados após 2017.
const carrosMaisNovos = carros.filter(el => {
return el.lancamento > 2017;
})
Temos como retorno:
[
{
nome: 'Onix',
motor: 1.0,
fabricante: 'Chevrolet',
kmRodados: 20020,
lancamento: 2019
},
{
nome: 'Kwid',
motor: 1.0,
fabricante: 'Renault',
kmRodados: 20000,
lancamento: 2018
},
{
nome: 'Sandero',
motor: 1.6,
fabricante: 'Renault',
kmRodados: 40000,
lancamento: 2018
}
]
Bem simples, não? O método filter é bem útil para implementar, por exemplo, uma busca em uma tabela na sua aplicação.
Reduce:
The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.
texto retirado de developer.mozilla.org
Após multiplicar as quilometragens, reduzir nosso array para os carros que possuem o lançamento após 2017, agora vamos realizar a soma do total de quilometragem destes carros filtrados. E para isso usaremos o reduce em que este método consiste em percorrer o array e retornar um único valor após sua execução. Este método possui um acumulador que é a variável que mantém o registro da última soma realizada, uma variável currentElement que é o n item do array utilizado e a variável initialValue que passa o valor inicial para a variável acumuladora.
const initialValue = 0;
const totalKm = carrosMaisNovos.reduce((accumulator, currentElement) => {
return accumulator + currentElement.kmRodados;
}, initialValue);
// totalKm = 80020
O map, filter e reduce são métodos que me auxiliam bastante no meu dia a dia durante o desenvolvimento pois são métodos poderosos e não são difíceis de serem utilizados.
Espero que este breve tutorial possa te ajudar e qualquer dúvida pode entrar em contato comigo pelo meu email ou em alguma das minhas redes sociais.
Até o próximo post!