CodeForge

JavaScript de Cero a Experto / Arrays

map: transformar una lista

Teoría20 min20 XP

Empieza la parte que cambia tu forma de pensar las listas. map toma un array, le aplica una transformación a CADA elemento, y te devuelve un array NUEVO con los resultados —sin escribir bucles, sin tocar el original—. Es el primero de los tres métodos que todo programador de JavaScript usa a diario. En cuanto lo entiendas, no querrás volver a los bucles a mano para esto.

La banda transportadora

map en acción

map recibe una función que transforma UN elemento (lo que ella returne es el nuevo valor), y devuelve un array NUEVO con todos transformados. Dos propiedades clave: el resultado tiene el mismo tamaño que el original (un elemento entra, uno sale), y el original NO cambia (map es inmutable, crea uno nuevo). Como forEach, te da también el índice si lo necesitas.

Del bucle a map

Compara las dos formas de hacer lo mismo:

bucle-vs-map.js
// CON bucle: creas un array vacío y lo vas llenando (más pasos)
const conIva = [];
for (const precio of precios) {
conIva.push(precio * 1.19);
}

// CON map: una línea, declarativa. "transforma cada precio en precio * 1.19"
const conIva2 = precios.map((precio) => precio * 1.19);

Ambas dan el mismo resultado, pero map dice QUÉ quieres ("cada precio con IVA") en vez de CÓMO recorrerlo (crear array, iterar, push). Ese estilo DECLARATIVO —describir el resultado, no los pasos— hace el código más corto, más legible y con menos errores. Es el mismo salto mental que verás llevado al extremo en React.

Tienes const nums = [1, 2, 3] y haces const dobles = nums.map(n => n * 2). Después revisas nums. ¿Qué contiene nums, y qué contiene dobles?

Mini-reto

En "Mi Bolsillo": tienes un array gastos de valores. Usa map para crear gastosConIva (cada uno * 1.19), y otro map para crear etiquetas (cada gasto como "$X"). Comprueba con un console.log que el array gastos original sigue igual. Sentir que transformas sin destruir el original es la mentalidad que te acompañará el resto del curso.

Qué sigue

map transforma todos los elementos. Pero a veces no quieres transformarlos, sino ELEGIR algunos: los gastos mayores a cierto monto, los productos en oferta. La próxima lección trae filter (quedarte con los que cumplen una condición) y find (encontrar el primero que cumple) — los métodos para seleccionar.