Cómo usar map() en JavaScript para transformar arrays

Tienes una lista de precios y necesitas aplicar un 20% de descuento a todos. Tienes una lista de nombres y quieres convertirlos todos a mayúsculas. Para transformar cada elemento de un array, JavaScript tiene map().

¿Qué hace map()?

map() recorre un array y devuelve un nuevo array donde cada elemento ha sido transformado por la función que tú defines. El array original no se modifica y el nuevo array tiene exactamente la misma cantidad de elementos.

Sintaxis

const resultado = array.map(function(elemento) {
  return transformacion;
});

// Con arrow function:
const resultado = array.map(elemento => transformacion);

Ejemplo 1: duplicar números

const numeros = [1, 2, 3, 4, 5];

const dobles = numeros.map(n => n * 2);

console.log(dobles); // [2, 4, 6, 8, 10]
console.log(numeros); // [1, 2, 3, 4, 5] — sin cambios

Ejemplo 2: aplicar descuento a precios

const precios = [10000, 25000, 8000, 50000];

const conDescuento = precios.map(precio => precio * 0.8);

console.log(conDescuento); // [8000, 20000, 6400, 40000]

Ejemplo 3: transformar objetos

const usuarios = [
  { nombre: 'ana', activo: true },
  { nombre: 'carlos', activo: false },
  { nombre: 'maría', activo: true },
];

const nombres = usuarios.map(u => u.nombre.toUpperCase());

console.log(nombres); // ['ANA', 'CARLOS', 'MARÍA']

Diferencia entre map y forEach

Tanto map como forEach recorren un array, pero:

• forEach ejecuta código para cada elemento pero no devuelve nada
• map ejecuta código para cada elemento y devuelve un nuevo array

Usa map cuando necesitas transformar datos. Usa forEach cuando solo necesitas ejecutar una acción (como imprimir).

Encadenar map y filter

Puedes combinar map y filter para transformaciones más complejas:

const precios = [10000, 500, 25000, 300, 8000];

const preciosGrandesConDescuento = precios
  .filter(p => p > 1000)
  .map(p => p * 0.9);

console.log(preciosGrandesConDescuento); // [9000, 22500, 7200]

Errores frecuentes

Olvidar el return: Sin return explícito (cuando usas {}), cada elemento del nuevo array será undefined.

Usar map cuando solo quieres efectos secundarios: Si no usas el array resultante, probablemente deberías usar forEach.

Modificar el elemento original: map está diseñado para crear datos nuevos. Modificar el elemento original dentro de map es una mala práctica.