Métodos funcionais: map, filter, reduce e mais

Métodos funcionais

Esses métodos recebem uma função e percorrem o array por você. Tornam o código mais claro e declarativo que um laço manual. E mais um pedaço da ⚠️ ARMADILHA CLÁSSICA: map e filter não mutam (retornam um array novo); sort muta sim. Quase todos retornam algo novo, mas sort é a exceção que pode te pegar.

forEach: executar algo para cada elemento

[1, 2, 3].forEach(n => console.log(n)); // imprime 1, 2 e 3

map: transformar cada elemento

Retorna um novo array com cada elemento transformado:

const numeros = [1, 2, 3];
const dobros = numeros.map(n => n * 2); // [2, 4, 6]

filter: ficar com alguns

Retorna um novo array com os elementos que cumprem uma condição:

const pares = [1, 2, 3, 4].filter(n => n % 2 === 0); // [2, 4]

reduce: resumir tudo em um valor

Acumula os elementos em um único resultado. Recebe um acumulador e um valor inicial:

const total = [1, 2, 3, 4].reduce((acc, n) => acc + n, 0); // 10

find, some e every

[5, 12, 8].find(n => n > 10);    // 12 (o primeiro que cumpre)
[1, 2, 3].some(n => n > 2);      // true (pelo menos um cumpre)
[2, 4, 6].every(n => n % 2 === 0); // true (todos cumprem)

sort: ordenar

sort ordena modificando o array. Para números você precisa de uma função de comparação:

const nums = [3, 1, 2];
nums.sort((a, b) => a - b); // [1, 2, 3] crescente
nums.sort((a, b) => b - a); // [3, 2, 1] decrescente

Sem função de comparação, sort ordena como texto: [10, 2, 1] se transformaria em [1, 10, 2]. Cuidado!

Encadear métodos

Como muitos retornam arrays, você pode encadeá-los:

const resultado = [1, 2, 3, 4, 5, 6]
  .filter(n => n % 2 === 0) // [2, 4, 6]
  .map(n => n * 10)         // [20, 40, 60]
  .reduce((a, b) => a + b, 0); // 120

Filtre, transforme e resuma em um único pipeline: é assim que carrinhos, pontuações ou qualquer lista real são processados sem um único laço escrito à mão. E isso é só o começo: em breve cada elemento deixará de ser um número solto para virar um objeto (um produto com preço e nome, um usuário com email)... e esses mesmos métodos vão brilhar ainda mais.

Exemplos

map + filter + reduce trabalhando juntos

const precos = [10, 25, 5, 40];
const caros = precos.filter(p => p >= 25); // [25, 40]
const comImposto = caros.map(p => p * 1.21); // [30.25, 48.400000000000006]
// ⚠️ Os decimais em binário não são exatos: 40 * 1.21 não dá um 48.4 "redondo".
const total = comImposto.reduce((a, b) => a + b, 0);
console.log(caros, comImposto, total);

Ordenar números corretamente

const idades = [30, 5, 21, 8];
idades.sort((a, b) => a - b);
console.log(idades); // [5, 8, 21, 30]