map, filter y reduce en JavaScript, explicado desde cero

map() recorre un array y devuelve uno nuevo, del mismo tamaño, con cada elemento transformado por la función que le pases.

<script>
  const precios = [1000, 2500, 899, 4200];

  // La forma con bucle, que ya conoces
  const conIva1 = [];
  for (const p of precios) {
    conIva1.push(Math.round(p * 1.19));
  }

  // Lo mismo con map()
  const conIva2 = precios.map(p => Math.round(p * 1.19));

  console.log(conIva1);
  console.log(conIva2);
  console.log("original sigue igual:", precios);
</script>

filter() recorre el array y devuelve uno nuevo, solo con los elementos donde la función devuelve true.

<script>
  const jugadores = [
    { nombre: "Ana",   puntos: 340 },
    { nombre: "Joaco", puntos: 1500 },
    { nombre: "María", puntos: 210 },
    { nombre: "Pedro", puntos: 980 }
  ];

  const clasificados = jugadores.filter(j => j.puntos >= 500);
  console.log(clasificados);
  console.log("Cuántos clasifican:", clasificados.length);
</script>

Y como map y filter devuelven arrays, se pueden encadenar uno detrás del otro.

<script>
  const jugadores = [
    { nombre: "Ana",   puntos: 340 },
    { nombre: "Joaco", puntos: 1500 },
    { nombre: "María", puntos: 210 },
    { nombre: "Pedro", puntos: 980 }
  ];

  const nombresClasificados = jugadores
    .filter(j => j.puntos >= 500)
    .map(j => j.nombre);

  console.log(nombresClasificados);
</script>

reduce() es el más raro de los tres al principio, pero el más potente: recorre el array acumulando un resultado, y al final entrega un solo valor.

<script>
  const puntos = [340, 1500, 210, 980];

  // acumulador empieza en 0, y se le suma cada elemento
  const total = puntos.reduce((acumulador, actual) => acumulador + actual, 0);
  console.log("Total:", total);

  // reduce también sirve para encontrar el máximo
  const maximo = puntos.reduce((acum, actual) => actual > acum ? actual : acum);
  console.log("Máximo:", maximo);
</script>

Un ranking típico: filtrar quiénes clasifican, calcular su bono, y sumar el total a repartir. Los tres métodos, encadenados.

<script>
  const jugadores = [
    { nombre: "Ana",   puntos: 340 },
    { nombre: "Joaco", puntos: 1500 },
    { nombre: "María", puntos: 210 },
    { nombre: "Pedro", puntos: 980 }
  ];

  const totalBonos = jugadores
    .filter(j => j.puntos >= 500)           // solo los que clasifican
    .map(j => Math.round(j.puntos * 0.1))   // el bono de cada uno
    .reduce((total, bono) => total + bono, 0);  // suma de todos los bonos

  console.log("Total a repartir en bonos:", totalBonos);
</script>

map() para transformar, filter() para elegir, reduce() para resumir en un valor, y cómo encadenarlos para reemplazar bucles enteros con una sola línea legible.

Ahora, cómo separar tu código en varios archivos en vez de amontonarlo todo en uno.

map, filter y reduce

map, filter and reduce