¿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 retornantrue.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,0en el ejemplo). Sin él, el comportamiento cambia y puede lanzar errores con arreglos vacíos. - Usar
mapcuando en realidad no necesitas el arreglo resultante (forEaches la mejor opción ahí). - Olvidar el
returncuando el callback usa llaves:map(n => { n * 2 })devuelveundefinedporque falta elreturn.
"
maptransforma cada elemento y devuelve un arreglo del mismo tamaño.filterdevuelve solo los elementos que cumplen una condición.reducerecorre 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. Conreducesiempre me acuerdo de dar el valor inicial del acumulador."
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