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.