DevPath · Aprende a programar ESPTEN

Proyectos prácticos

Procesar datos con map, filter y reduce

Procesar listas de datos

Gran parte del trabajo real consiste en transformar listas de datos: ventas, usuarios, productos... El trío map, filter y reduce es la herramienta perfecta.

const ventas = [
  { producto: "teclado", precio: 25, cantidad: 3 },
  { producto: "ratón", precio: 15, cantidad: 5 },
  { producto: "monitor", precio: 150, cantidad: 1 },
];

// 1. map: calcular el total de cada línea
const totales = ventas.map((v) => v.precio * v.cantidad);

// 2. filter: solo ventas caras
const caras = ventas.filter((v) => v.precio > 20);

// 3. reduce: ingreso total
const ingresoTotal = ventas.reduce(
  (acc, v) => acc + v.precio * v.cantidad,
  0
);

console.log(totales);      // [75, 75, 150]
console.log(ingresoTotal); // 300

Encadenar transformaciones

La potencia real aparece al encadenar estos métodos:

const ingresoProductosCaros = ventas
  .filter((v) => v.precio > 20)
  .map((v) => v.precio * v.cantidad)
  .reduce((acc, total) => acc + total, 0);

Lee el flujo de arriba abajo: filtra, transforma y agrega. Es declarativo y muy legible.

Ejemplos

Agrupar y resumir datos

const usuarios = [
  { nombre: "Ana", activo: true },
  { nombre: "Luis", activo: false },
  { nombre: "Eva", activo: true },
];
const activos = usuarios.filter((u) => u.activo).map((u) => u.nombre);
console.log("Usuarios activos:", activos);
Pon esto en práctica

DevPath es un curso práctico: aquí lees la teoría; en la app la pones en práctica con ejercicios que se ejecutan de verdad, sin conexión.

Empezar gratis en la app →
← Cómo abordar un proyectoModelar con clases →