Métodos funcionales: map, filter, reduce y más

Métodos funcionales

Estos métodos reciben una función y recorren el array por ti. Hacen el código más claro y declarativo que un bucle manual. Y otra de la ⚠️ TRAMPA CLÁSICA: map y filter no mutan (devuelven un array nuevo); sort sí muta. Casi todos devuelven algo nuevo, pero sort es la excepción que te puede pillar.

forEach: ejecutar algo por cada elemento

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

map: transformar cada elemento

Devuelve un nuevo array con cada elemento transformado:

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

filter: quedarte con algunos

Devuelve un nuevo array con los elementos que cumplen una condición:

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

reduce: resumir todo en un valor

Acumula los elementos en un único resultado. Recibe un acumulador y un valor inicial:

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

find, some y every

[5, 12, 8].find(n => n > 10);    // 12 (el primero que cumple)
[1, 2, 3].some(n => n > 2);      // true (al menos uno cumple)
[2, 4, 6].every(n => n % 2 === 0); // true (todos cumplen)

sort: ordenar

sort ordena modificando el array. Para números necesitas una función de comparación:

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

Sin función de comparación, sort ordena como texto: [10, 2, 1] se convertiría en [1, 10, 2]. ¡Cuidado!

Encadenar métodos

Como muchos devuelven arrays, puedes encadenarlos:

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

Filtra, transforma y resume en una sola tubería: así se procesan carritos, puntuaciones o cualquier lista real sin un solo bucle a mano. Y esto es solo el principio: pronto cada elemento dejará de ser un número suelto para ser un objeto (un producto con precio y nombre, un usuario con email)... y estos mismos métodos brillarán aún más.

Ejemplos

map + filter + reduce trabajando juntos

const precios = [10, 25, 5, 40];
const caros = precios.filter(p => p >= 25); // [25, 40]
const conIva = caros.map(p => p * 1.21);    // [30.25, 48.400000000000006]
// ⚠️ Los decimales en binario no son exactos: 40 * 1.21 no da 48.4 "redondo".
const total = conIva.reduce((a, b) => a + b, 0);
console.log(caros, conIva, total);

Ordenar números correctamente

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