Artigo original: JavaScript Map, Reduce, and Filter - JS Array Functions Explained with Code Examples
Map, reduce e filter são todos métodos de arrays em JavaScript. Cada um deles percorrerá um array e realizará uma transformação ou um cálculo. Eles retornarão um novo array com base no resultado da função. Neste artigo, você aprenderá o motivo e a maneira de usar cada um deles.
Aqui vemos um resumo divertido feito por Steven Luscher:
Map
O método map()
é usado para criar um novo array a partir de um array existente, aplicando uma mesma função a cada um dos elementos do array inicial.
Sintaxe
var novo_array = arr.map(function callback(elemento, índice, array) {
// Valor de retorno para novo_array
}[, argumentoUsado])
Na função de callback, somente o elemento
do array é necessário. Em geral, alguma ação é realizada no valor e um novo valor é retornado.
Exemplo
No exemplo a seguir, cada número no array é duplicado.
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(item => item * 2);
console.log(doubled); // o resultado é [2, 4, 6, 8]
Filter
O método filter()
recebe cada elemento do array e aplica uma instrução condicional a ele. Se essa condição for verdadeira, o elemento é colocado no array de resultado. Se for falsa, o elemento não é colocado lá.
Sintaxe
var novo_array = arr.filter(function callback(elemento, índice, array) {
// Retorna true ou false
}[, argumentoUsado])
A sintaxe para filter
é semelhante a de map
, exceto pelo fato de a função de callback retornar apenas true
para manter o elemento ou false
para descartá-lo. Na função de callback, apenas o elemento
é necessário.
Exemplos
No exemplo a seguir, números ímpares são "descartados"/removidos pelo filtro, deixando apenas os números pares.
const numbers = [1, 2, 3, 4];
const evens = numbers.filter(item => item % 2 === 0);
console.log(evens); // o resultado é [2, 4]
No próximo exemplo, filter()
é usado para obter todos os alunos cujas notas são maiores que ou iguais a 90.
const students = [
{ name: 'Quincy', grade: 96 },
{ name: 'Jason', grade: 84 },
{ name: 'Alexis', grade: 100 },
{ name: 'Sam', grade: 65 },
{ name: 'Katie', grade: 90 }
];
const studentGrades = students.filter(student => student.grade >= 90);
return studentGrades; // o resultado é [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]
Reduce
O método reduce()
reduz um array de valores a um único valor. Para obter o valor de resultado, ele executa uma função de redução em cada elemento do array.
Sintaxe
arr.reduce(callback[, valorInicial])
O argumento callback
é uma função que será chamada uma vez para cada item do array. Essa função recebe quatro argumentos, mas, em geral, apenas os dois primeiros são utilizados.
- acumulador - o valor retornado da iteração anterior
- valorAtual - o item atual no array
- índice - o índice do item atual
- array - o array original para o qual o método reduce é chamado
- O argumento
valorInicial
é opcional. Se for fornecido, será usado como o valor inicial do acumulador na primeira chamada da função de callback.
Exemplos
O exemplo a seguir soma cada um dos números de um array.
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce(function (result, item) {
return result + item;
}, 0);
console.log(sum); // o resultado é 10 - 1+2+3+4
No exemplo a seguir, reduce()
é usado para transformar um array de strings em um único objeto que mostra quantas vezes cada string aparece no array. Observe que essa chamada de reduce passa um objeto vazio {}
como o parâmetro valorInicial
. Ele será usado como o valor inicial para o acumulador (o primeiro argumento) passado para a função de callback.
var pets = ['dog', 'chicken', 'cat', 'dog', 'chicken', 'chicken', 'rabbit'];
var petCounts = pets.reduce(function(obj, pet){
if (!obj[pet]) {
obj[pet] = 1;
} else {
obj[pet]++;
}
return obj;
}, {});
console.log(petCounts);
/*
o resultado é:
{
dog: 2,
chicken: 3,
cat: 1,
rabbit: 1
}
*/
Explicação em vídeo
Confira o vídeo abaixo, do canal do freeCodeCamp.org no YouTube. Ele trata dos métodos de array discutidos e de algumas questões a mais.