Tema 13 · Colecciones

Métodos Funcionales: map, filter y reduce

Aprende a transformar, filtrar y operar sobre listas de datos con programación funcional moderna usando map, filter, find, some, every y reduce.

Arrays y Métodos Mutadores Desestructuración y Operador Spread (...)

Programación Funcional sobre Arrays en ES6+

En lugar de escribir bucles for imperativos con contadores y variables mutables, JavaScript moderno promueve el uso de métodos iterativos de orden superior. Estos métodos reciben funciones callback, no mutan el array original y hacen el código mucho más legible, declarativo y predecible.

Método Propósito Principal Retorno
.map(callback) Transforma cada elemento aplicando una regla o cálculo. Un nuevo array con la misma cantidad de elementos.
.filter(callback) Filtra los elementos según una condición lógica (predicado). Un nuevo array con solo los elementos que retornaron true.
.find(callback) Busca el primer elemento que cumpla la condición. El elemento encontrado o undefined.
.some(callback) Verifica si al menos un elemento cumple la condición. Booleano (true o false).
.every(callback) Verifica si todos los elementos cumplen la condición. Booleano (true o false).
.reduce(callback, inicio) Acumula todos los valores en un único resultado final (número, string, objeto). El valor acumulado final.

1. Transformación con .map()

Crea una nueva lista aplicando una función a cada elemento sin alterar la original:

const preciosNetos = [100, 250, 400];
const preciosConIva = preciosNetos.map(precio => precio * 1.19);
console.log(preciosConIva); // [119, 297.5, 476]

2. Filtrado con .filter()

Extrae únicamente los elementos que cumplan una regla:

const puntajes = [85, 42, 98, 60, 74];
const aprobados = puntajes.filter(nota => nota >= 60);
console.log(aprobados); // [85, 98, 60, 74]

3. Acumulación con .reduce()

Ideal para sumatorias, promedios o agrupación de datos:

const carrito = [
  { item: "Curso PHP", precio: 45 },
  { item: "Curso JS", precio: 35 },
  { item: "Libro CSS", precio: 20 }
];

const totalPagar = carrito.reduce((acumulador, producto) => acumulador + producto.precio, 0);
console.log("Total a pagar: $" + totalPagar); // 100

⚡ Filtrado y Transformación de Catálogo en Vivo

Aplica filter, map y reduce dinámicamente con botones sobre un catálogo de cursos:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Métodos Funcionales de Arrays</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-catalogo { max-width: 580px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    .filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
    .filtros button { padding: 8px 14px; border: 1px solid #94a3b8; background: #f1f5f9; border-radius: 6px; cursor: pointer; font-weight: 600; }
    .filtros button:hover { background: #0284c7; color: white; border-color: #0284c7; }
    .resumen { background: #f0fdf4; border: 1px solid #86efac; color: #166534; padding: 12px; border-radius: 6px; margin-bottom: 15px; font-weight: 600; }
    ul { list-style: none; padding: 0; margin: 0; }
    li { display: flex; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #e2e8f0; }
    li:last-child { border-bottom: none; }
    .tag { font-size: 0.75rem; padding: 2px 8px; border-radius: 12px; background: #e0f2fe; color: #0369a1; font-weight: bold; }
  </style>
</head>
<body>

  <div class="card-catalogo">
    <h3 style="margin-top: 0; color: #0f172a;">Catálogo Académico Kilopolis</h3>

    <div class="filtros">
      <button onclick="mostrarTodos()">Todos</button>
      <button onclick="filtrarNivel('Básico')">Solo Básico</button>
      <button onclick="filtrarNivel('Avanzado')">Solo Avanzado</button>
      <button onclick="aplicarDescuento(0.8)">Aplicar 20% Dto.</button>
    </div>

    <div class="resumen" id="caja-resumen">Cargando catálogo...</div>

    <ul id="lista-cursos"></ul>

    <script>
      const cursosBase = [
        { id: 1, titulo: "HTML5 Semántico y Accesibilidad", precio: 30, nivel: "Básico" },
        { id: 2, titulo: "CSS3 Flexbox y CSS Grid", precio: 40, nivel: "Básico" },
        { id: 3, titulo: "JavaScript ES6+ Asíncrono", precio: 50, nivel: "Avanzado" },
        { id: 4, titulo: "PHP 8.3 & Arquitectura MVC", precio: 60, nivel: "Avanzado" }
      ];

      let cursosVisibles = [...cursosBase];

      function renderizar() {
        const lista = document.getElementById('lista-cursos');
        const resumen = document.getElementById('caja-resumen');

        // reduce para calcular la sumatoria
        const total = cursosVisibles.reduce((acc, c) => acc + c.precio, 0);

        resumen.textContent = `Cursos listados: ${cursosVisibles.length} · Valor total del grupo: $${total} USD`;

        lista.innerHTML = cursosVisibles.map(c => `
          <li>
            <span><strong>${c.titulo}</strong> <span class="tag">${c.nivel}</span></span>
            <span style="font-weight: 600; color: #0f172a;">$${c.precio} USD</span>
          </li>
        `).join('');
      }

      function mostrarTodos() {
        cursosVisibles = [...cursosBase];
        renderizar();
      }

      function filtrarNivel(nivel) {
        // filter para seleccionar por condición
        cursosVisibles = cursosBase.filter(c => c.nivel === nivel);
        renderizar();
      }

      function aplicarDescuento(factor) {
        // map para recalcular precios inmutablemente
        cursosVisibles = cursosVisibles.map(c => ({
          ...c,
          precio: Math.round(c.precio * factor)
        }));
        renderizar();
      }

      renderizar();
    </script>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de JavaScript ES6+ y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno Full-Stack Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.