Métodos de arrays: map, filter, reduce, find

Aprende a transformar, filtrar y agregar datos con los cuatro métodos de arrays más usados en proyectos reales.

10 min · 3 preguntas

En un proyecto real, pasas el tiempo transformando datos: una lista de productos para mostrar, resultados de una API para ordenar, un carrito para totalizar. Los métodos map, filter, reduce y find reemplazan la mayoría de tus bucles for con código más corto y más expresivo. Nunca modifican el array original: devuelven un nuevo resultado, lo que evita toda una categoría de errores.

const products = [
  { name: "keyboard", price: 49, inStock: true },
  { name: "mouse", price: 25, inStock: false },
  { name: "screen", price: 199, inStock: true }
];

const names = products.map((product) => product.name);
console.log(names); // ["keyboard", "mouse", "screen"]

filter conserva solo los elementos que superan una prueba y devuelve un nuevo array, posiblemente vacío. find se detiene en el primer elemento que coincide y devuelve el elemento en sí, o undefined si nada coincide. Ejercicio mental: para obtener todos los productos en stock, ¿cuál eliges? ¿Y para obtener el producto llamado "mouse"?

const available = products.filter((p) => p.inStock);
console.log(available.length); // 2

const mouse = products.find((p) => p.name === "mouse");
console.log(mouse.price); // 25

reduce es el más potente: reduce un array a un único valor (un número, un objeto, una cadena). Recibe una función con un acumulador y el elemento actual, más un valor inicial. Caso de uso clásico: calcular el total de un carrito.

const cart = [
  { label: "T-shirt", quantity: 2, unitPrice: 15 },
  { label: "Cap", quantity: 1, unitPrice: 12 }
];

const total = cart.reduce(
  (sum, item) => sum + item.quantity * item.unitPrice,
  0
);
console.log(total); // 42

Para elegir el método adecuado, hazte una sola pregunta: ¿qué forma debe tener el resultado? Tantos elementos como el original pero transformados: map. Un subconjunto: filter. Un único elemento: find. Un único valor calculado: reduce. Este reflejo te ahorrará un tiempo valioso tanto en entrevistas como en proyectos.

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. ¿Qué método devuelve siempre un array de la misma longitud que el array original?
   • filter
   • map
   • reduce
   • find
2. ¿Qué devuelve find si ningún elemento satisface la condición?
   • null
   • undefined
   • Un array vacío
   • Se lanza un error
3. En cart.reduce((sum, item) => sum + item.unitPrice, 0), ¿para qué sirve el 0 final?
   • Es el valor inicial del acumulador sum
   • Es el índice de inicio del recorrido
   • Es el valor devuelto si el array no es válido