{}
Aprende diseño y desarrollo web
Cursos gratuitos interactivos

Métodos de array en producción: map, filter y reduce con criterio

Aprende a transformar, filtrar y agregar colecciones con `map`, `filter` y `reduce` en flujos reales de frontend, manteniendo código legible y fácil de depurar.

Cuando trabajas con datos reales, la pregunta no es solo "recorrer": es transformar, filtrar y resumir sin romper el modelo mental del equipo.

`map`, `filter` y `reduce` son una mini-gramática para construir pipelines claros y mantenibles.

Esta lección te enseña a decidir qué método usar según el objetivo, no por moda ni por memoria mecánica.

Si dominas este bloque, tus datos de API y tu estado de UI se volverán mucho más fáciles de manipular.

  • Elegir bien método evita lógica enredada.
  • Usa `map` cuando necesites la misma cantidad de elementos, pero con forma o valor distinto. Usa `filter` cuando quieras quedarte solo con un subconjunto. Usa `reduce` cuando el resultado final sea un único valor o estructura acumulada.
  • En proyectos grandes, este criterio evita bucles enormes que mezclan varias responsabilidades en una sola función.
  • Transforma colecciones sin tocar la original.
  • `map` es ideal cuando una API devuelve estructura cruda y tú necesitas shape de presentación. Cada entrada se transforma en una salida, una por una.

Árbol de decisión rápido: ¿map, filter o reduce?

Elegir bien método evita lógica enredada.

Usa `map` cuando necesites la misma cantidad de elementos, pero con forma o valor distinto. Usa `filter` cuando quieras quedarte solo con un subconjunto. Usa `reduce` cuando el resultado final sea un único valor o estructura acumulada.

En proyectos grandes, este criterio evita bucles enormes que mezclan varias responsabilidades en una sola función.

map en casos reales: preparar datos para UI

Transforma colecciones sin tocar la original.

`map` es ideal cuando una API devuelve estructura cruda y tú necesitas shape de presentación. Cada entrada se transforma en una salida, una por una.

Si no devuelves valor en callback de `map`, tendrás `undefined` en cada posición: error muy común al empezar.

filter con criterios compuestos

Filtrar bien es construir reglas de negocio claras.

Con `filter` puedes aplicar varias condiciones y quedarte solo con lo relevante. Esto es muy común en buscadores, paneles de admin y listados de tienda.

No metas condiciones gigantes en línea: crea booleanos intermedios con nombres que expliquen intención.

  • Si solo necesitas saber si existe al menos uno, usa `some`.
  • Si quieres el primero que cumpla, usa `find`.
  • Usa `filter` cuando realmente necesites una colección resultante.

reduce sin miedo: acumular con semilla correcta

El secreto de `reduce` está en el acumulador y su valor inicial.

`reduce` recibe acumulador y elemento actual en cada iteración. El valor inicial define qué tipo de resultado construirás (número, objeto, array, mapa, etc.).

Si omites la semilla en arrays vacíos, tendrás errores. En producción, mejor semilla explícita casi siempre.

Pipeline completo: filtrar, transformar y resumir

La potencia real aparece al encadenar métodos con propósito.

Un pipeline bien diseñado permite leer la lógica como una historia: primero qué datos valen, luego cómo se transforman y finalmente cómo se agregan.

Evita meter side effects dentro de callbacks (`console.log` masivos o mutaciones externas). Mantén callbacks puras siempre que puedas.

JavaScript
18

Métodos de array en producción: map, filter y reduce con criterio

Aprende a transformar, filtrar y agregar colecciones con `map`, `filter` y `reduce` en flujos reales de frontend, manteniendo código legible y fácil de depurar.

¿Cuánto sabes de JavaScript?

Código del tema: map → filter → reduce

📘 Teoría

Árbol de decisión rápido: ¿map, filter o reduce?

Elegir bien método evita lógica enredada.

Usa `map` cuando necesites la misma cantidad de elementos, pero con forma o valor distinto. Usa `filter` cuando quieras quedarte solo con un subconjunto. Usa `reduce` cuando el resultado final sea un único valor o estructura acumulada.

En proyectos grandes, este criterio evita bucles enormes que mezclan varias responsabilidades en una sola función.

1

map

Transforma cada elemento.

  • Lista de precios -> con IVA
  • Usuarios -> tarjetas de UI
2

filter

Selecciona elementos que cumplen condición.

  • Solo activos
  • Solo stock > 0
3

reduce

Acumula en un resultado final.

  • Suma total
  • Agrupar por categoría
4

Pipeline

Combina métodos en pasos declarativos.

  • filter -> map -> reduce
  • Código más expresivo

map en casos reales: preparar datos para UI

Transforma colecciones sin tocar la original.

1

`map` es ideal cuando una API devuelve estructura cruda y tú necesitas shape de presentación. Cada entrada se transforma en una salida, una por una.

2

Si no devuelves valor en callback de `map`, tendrás `undefined` en cada posición: error muy común al empezar.

Productos a formato de tarjeta
const productos = [
  { id: 1, nombre: 'Teclado', precio: 49.99 },
  { id: 2, nombre: 'Ratón', precio: 19.5 }
];

const tarjetas = productos.map((p) => ({
  ...p,
  precioLabel: `${p.precio.toFixed(2)} €`
}));

console.log(tarjetas);

filter con criterios compuestos

Filtrar bien es construir reglas de negocio claras.

Con `filter` puedes aplicar varias condiciones y quedarte solo con lo relevante. Esto es muy común en buscadores, paneles de admin y listados de tienda.

No metas condiciones gigantes en línea: crea booleanos intermedios con nombres que expliquen intención.

  • Si solo necesitas saber si existe al menos uno, usa `some`.
  • Si quieres el primero que cumpla, usa `find`.
  • Usa `filter` cuando realmente necesites una colección resultante.
Filtrado por estado y precio
const items = [
  { id: 1, activo: true, precio: 120 },
  { id: 2, activo: false, precio: 60 },
  { id: 3, activo: true, precio: 40 }
];

const visibles = items.filter((item) => item.activo && item.precio >= 50);
console.log(visibles);

reduce sin miedo: acumular con semilla correcta

El secreto de `reduce` está en el acumulador y su valor inicial.

1

`reduce` recibe acumulador y elemento actual en cada iteración. El valor inicial define qué tipo de resultado construirás (número, objeto, array, mapa, etc.).

2

Si omites la semilla en arrays vacíos, tendrás errores. En producción, mejor semilla explícita casi siempre.

Total de ventas
const ventas = [120, 80, 45, 200];

const total = ventas.reduce((acum, valor) => acum + valor, 0);
console.log(total);

Pipeline completo: filtrar, transformar y resumir

La potencia real aparece al encadenar métodos con propósito.

1

Un pipeline bien diseñado permite leer la lógica como una historia: primero qué datos valen, luego cómo se transforman y finalmente cómo se agregan.

2

Evita meter side effects dentro de callbacks (`console.log` masivos o mutaciones externas). Mantén callbacks puras siempre que puedas.

Pipeline de facturación
const pedidos = [
  { estado: 'pagado', total: 50 },
  { estado: 'pendiente', total: 90 },
  { estado: 'pagado', total: 120 }
];

const facturacion = pedidos
  .filter((p) => p.estado === 'pagado')
  .map((p) => p.total)
  .reduce((acum, total) => acum + total, 0);

console.log(facturacion);

🧪 Aprende probando

Ejemplo Ejemplo guiado: dashboard de pedidos Combina map/filter/reduce para generar métricas de negocio a partir de datos crudos.
⌄
Ejemplo Ejemplo guiado: normalizar usuarios de API Transforma datos de backend para adaptarlos al formato de componentes UI.
⌄
Ejemplo Demo interactiva: laboratorio de pipelines Introduce números y observa cómo map/filter/reduce cambian el resultado final en tiempo real.
⌄
Ejemplo Demo interactiva: filtro combinado de proyectos Filtra una colección por tipo y por stack usando condiciones separadas, `filter` y `some`.
⌄

🏁 Retos

Reto Reto 1: filtrar y mapear catálogo Deja solo productos con stock y devuelve etiquetas con nombre + precio formateado.
⌄
Reto Reto 2: reduce para agrupar ventas por categoría Construye un acumulador objeto con total por categoría a partir de una lista de ventas.
⌄

🧰 Recursos

Enlaces útiles

javascript.info: Array methods MDN: Array.prototype.map MDN: Array.prototype.reduce MDN: Array.prototype.filter MDN: Array.prototype.some MDN: Array.prototype.find
Test

Comprueba tus conocimientos con un test sobre JavaScript.

Test de JavaScript
Recursos del curso 62
📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets
‹
Lección 17
Spread y rest: copiar, fusionar y agrupar datos sin mutaciones peligrosas
Lección 19
Strings y números sin sorpresas: parseo, formato y precisión
›

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .