← JavaScript

Arrays y objetos

¿Cuál es la diferencia entre `map`, `filter` y `reduce`?

Ver respuesta — intenta responderla en voz alta primero

map transforma cada elemento y devuelve un arreglo del mismo tamaño. filter devuelve un arreglo que contiene solo los elementos que cumplen una condición. reduce combina todos los elementos en un único valor. Los tres devuelven algo nuevo y nunca modifican el arreglo original.

  • map: aplica una función a cada elemento y devuelve un arreglo nuevo con los resultados. La misma cantidad de elementos.
  • filter: evalúa cada elemento contra una condición y devuelve un arreglo nuevo con solo los que retornan true.
  • reduce: recorre el arreglo acumulando un resultado. Útil para sumar, contar, agrupar, etc. Devuelve un único valor.

Ninguno modifica el arreglo original: los tres devuelven algo nuevo.

const numeros = [1, 2, 3, 4, 5];

// map: transforma (duplica cada número)
const dobles = numeros.map((n) => n * 2);
console.log(dobles); // [2, 4, 6, 8, 10]

// filter: filtra (solo los pares)
const pares = numeros.filter((n) => n % 2 === 0);
console.log(pares); // [2, 4]

// reduce: combina (suma todo)
const suma = numeros.reduce((acc, n) => acc + n, 0);
console.log(suma); // 15

// El arreglo original nunca cambió
console.log(numeros); // [1, 2, 3, 4, 5]

// Se pueden encadenar
const sumaDePareDuplicados = numeros
  .filter((n) => n % 2 === 0) // [2, 4]
  .map((n) => n * 2)          // [4, 8]
  .reduce((acc, n) => acc + n, 0); // 12
console.log(sumaDePareDuplicados); // 12
  • Olvidar el valor inicial en reduce (el segundo argumento, 0 en el ejemplo). Sin él, el comportamiento cambia y puede lanzar errores con arreglos vacíos.
  • Usar map cuando en realidad no necesitas el arreglo resultante (forEach es la mejor opción ahí).
  • Olvidar el return cuando el callback usa llaves: map(n => { n * 2 }) devuelve undefined porque falta el return.

"map transforma cada elemento y devuelve un arreglo del mismo tamaño. filter devuelve solo los elementos que cumplen una condición. reduce recorre el arreglo acumulando un valor hasta producir un único resultado, como una suma o un conteo. Los tres son inmutables: no modifican el arreglo original, devuelven uno nuevo, y se pueden encadenar. Con reduce siempre me acuerdo de dar el valor inicial del acumulador."

Reto rápido

Dado ["hola", "mundo", "js"], usa reduce para obtener el número total de caracteres de todas las palabras combinadas.

Ver solución
const palabras = ["hola", "mundo", "js"];
const totalCaracteres = palabras.reduce((acc, palabra) => acc + palabra.length, 0);
console.log(totalCaracteres); // 11