Método map() en JavaScript: guía completa con ejemplos prácticos

Transformar colecciones sin romper nada: el papel de map()

Casi cualquier programa en JavaScript trabaja con listas: productos de un carrito, usuarios de una API, mediciones de un sensor o filas de una tabla. Y una de las operaciones más frecuentes sobre esas listas es convertir cada elemento en otra cosa: un precio en otra moneda, un objeto en un texto, una cadena en un número o un registro en un componente visual.

Durante años, la forma habitual de hacerlo fue un bucle for que recorría el arreglo y empujaba resultados en otro. Funciona, pero mezcla la mecánica de la iteración con la intención del código. El método map de JavaScript separa ambas cosas: tú describes qué le pasa a un elemento y el lenguaje se encarga de aplicarlo a todos, devolviendo una colección nueva.

En esta guía vas a entender cómo funciona map() por dentro, qué recibe exactamente su función de callback, cómo usarlo con objetos, en React y con código asíncrono, y cómo se relaciona con novedades recientes del lenguaje como los iterator helpers y Array.fromAsync, incorporado oficialmente en ECMAScript 2026. También verás los errores más habituales y cómo resolverlos.

Cómo funciona map() por dentro

Array.prototype.map() existe desde ECMAScript 5, publicado en 2009, aunque se volvió omnipresente con la llegada de las funciones flecha en ES2015, que hicieron su sintaxis mucho más compacta. Su contrato es sencillo y conviene memorizarlo:

• Recorre el arreglo de principio a fin, en orden.
• Llama a una función, el callback, una vez por cada elemento.
• Guarda lo que devuelve el callback en la misma posición de un arreglo nuevo.
• Devuelve ese arreglo nuevo, que siempre tiene la misma longitud que el original.
• No modifica el arreglo sobre el que se invoca.

La firma completa es la siguiente:

const nuevoArreglo = arreglo.map(function callback(
    elemento,
    indice,
    arregloOriginal
) {
    // devuelve el valor transformado
}, thisArg);

Para entender que no hay magia, ayuda ver una implementación simplificada. Esto es, en esencia, lo que hace el motor:

function mapManual(arreglo, callback) {
    const resultado = new Array(arreglo.length);
    for (let i = 0; i < arreglo.length; i++) {
        if (i in arreglo) {
            resultado[i] = callback(arreglo[i], i, arreglo);
        }
    }
    return resultado;
}

console.log(mapManual([1, 2, 3], (n) => n * 10));

[ 10, 20, 30 ]

La comprobación i in arreglo explica un detalle que verás más adelante: map() se salta las posiciones vacías de los arreglos dispersos, pero conserva el hueco en el resultado.

Primeros pasos: transformar valores simples

El caso más básico es aplicar una operación matemática a cada número. Imagina una lista de temperaturas en grados Celsius que quieres mostrar en Fahrenheit:

const celsius = [18, 22.5, 30, -4];

const fahrenheit = celsius.map((grados) => (grados * 9) / 5 + 32);

console.log(fahrenheit);
console.log(celsius);

[ 64.4, 72.5, 86, 24.8 ]
[ 18, 22.5, 30, -4 ]

El segundo console.log demuestra la propiedad más valiosa del método: trabaja sin modificar el arreglo original, así que puedes seguir usando los datos de partida sin miedo a efectos secundarios.

Las funciones nativas también encajan como transformación. Para redondear precios o recortar espacios en cadenas basta con pasar la operación adecuada:

const precios = [19.99, 4.5, 102.49];
const redondeados = precios.map((precio) => Math.round(precio));

const etiquetas = ["  rojo", "verde  ", " azul "];
const limpias = etiquetas.map((texto) => texto.trim().toUpperCase());

console.log(redondeados, limpias);

[ 20, 5, 102 ] [ 'ROJO', 'VERDE', 'AZUL' ]

Observa que el callback siempre devuelve algo. Con funciones flecha de una sola expresión el return es implícito, pero si abres llaves debes escribirlo de forma explícita. Olvidarlo es uno de los errores más frecuentes, como verás al final.

Los tres argumentos del callback

Aunque la mayoría de las veces solo usarás el primero, el callback recibe tres argumentos: el elemento actual, su índice y el arreglo completo. Conocerlos amplía mucho lo que puedes hacer.

El índice permite tratar de forma distinta ciertas posiciones. Por ejemplo, numerar los pasos de una receta o marcar el primer elemento de una clasificación:

const pasos = [
    "Precalentar el horno",
    "Mezclar los ingredientes",
    "Hornear 25 minutos",
];

const numerados = pasos.map((paso, indice) => `${indice + 1}. ${paso}`);

const corredores = ["Lucía", "Mateo", "Sofía", "Iker"];
const podio = corredores.map((nombre, posicion) =>
    posicion === 0 ? `${nombre} (campeona)` : nombre
);

console.log(numerados);
console.log(podio);

[ '1. Precalentar el horno', '2. Mezclar los ingredientes', '3. Hornear 25 minutos' ]
[ 'Lucía (campeona)', 'Mateo', 'Sofía', 'Iker' ]

El tercer argumento, el arreglo completo, resulta útil cuando el nuevo valor depende de los vecinos. Un caso típico es calcular la variación entre mediciones consecutivas, como la diferencia de visitas de un día al siguiente:

const visitas = [120, 150, 135, 190];

const variacion = visitas.map((valor, i, todas) => {
    const siguiente = todas[i + 1];
    return siguiente === undefined ? 0 : siguiente - valor;
});

console.log(variacion);

[ 30, -15, 55, 0 ]

El último elemento no tiene siguiente, así que se resuelve con un valor por defecto. Siempre que accedas a otras posiciones del arreglo desde el callback, piensa en qué pasa en los extremos.

Existe además un segundo parámetro de map(), thisArg, que fija el valor de this dentro del callback. Con funciones flecha no tiene efecto, porque estas heredan this de su contexto, y en código moderno apenas se usa.

Transformar arreglos de objetos

En aplicaciones reales lo habitual es trabajar con arreglos de objetos que llegan de una API o de una base de datos. Saber transformar arreglos de objetos de forma limpia es una de las habilidades más útiles del día a día.

El primer patrón es extraer una propiedad. Con desestructuración en los parámetros el código queda muy legible:

const pedidos = [
    { id: 101, cliente: "Ana", total: 59.9, estado: "enviado" },
    { id: 102, cliente: "Bruno", total: 120, estado: "pendiente" },
    { id: 103, cliente: "Carla", total: 15.5, estado: "entregado" },
];

const clientes = pedidos.map(({ cliente }) => cliente);
console.log(clientes);

[ 'Ana', 'Bruno', 'Carla' ]

El segundo patrón es crear objetos nuevos con una forma distinta, por ejemplo para adaptar los datos de la API al formato que espera tu interfaz. Si devuelves un objeto literal desde una función flecha, envuélvelo en paréntesis; si no, el motor interpreta las llaves como el cuerpo de la función:

const resumen = pedidos.map(({ id, total }) => ({
    referencia: `PED-${id}`,
    totalConIva: Number((total * 1.16).toFixed(2)),
}));

console.log(resumen);

[
  { referencia: 'PED-101', totalConIva: 69.48 },
  { referencia: 'PED-102', totalConIva: 139.2 },
  { referencia: 'PED-103', totalConIva: 17.98 }
]

El tercer patrón consiste en añadir o cambiar una propiedad conservando el resto. Aquí está la trampa más peligrosa de map(): el método crea un arreglo nuevo, pero si modificas el objeto recibido, sigues alterando el objeto original, porque ambos arreglos apuntan a los mismos objetos en memoria.

// Incorrecto: muta los objetos originales
const marcadosMal = pedidos.map((pedido) => {
    pedido.urgente = pedido.total > 100;
    return pedido;
});

// Correcto: copia superficial con el operador de propagación
const marcados = pedidos.map((pedido) => ({
    ...pedido,
    urgente: pedido.total > 100,
}));

La versión con el operador de propagación crea un objeto nuevo por cada elemento y deja intactos los originales. Ten en cuenta que es una copia superficial: los objetos anidados siguen compartidos. Si necesitas una copia profunda, structuredClone() está disponible de forma nativa en navegadores y en Node.js.

Callbacks con nombre y funciones reutilizables

Las funciones flecha en línea son cómodas, pero cuando la transformación crece o se repite en varios lugares conviene darle nombre. El código gana legibilidad y la lógica se puede probar por separado:

function aEtiquetaPrecio(producto) {
    const formato = new Intl.NumberFormat("es-MX", {
        style: "currency",
        currency: "MXN",
    });
    return `${producto.nombre}: ${formato.format(producto.precio)}`;
}

const inventario = [
    { nombre: "Teclado", precio: 899 },
    { nombre: "Monitor", precio: 4599.5 },
];

console.log(inventario.map(aEtiquetaPrecio));

[ 'Teclado: $899.00', 'Monitor: $4,599.50' ]

Pasar la referencia a la función, sin paréntesis, es exactamente lo mismo que escribir producto => aEtiquetaPrecio(producto), con una diferencia importante: la función recibirá los tres argumentos del callback, no solo el primero. La mayoría de las veces da igual, pero hay casos en que esto produce resultados sorprendentes.

Conversión de tipos y la trampa de parseInt

Un uso muy común de map() es convertir cadenas numéricas, por ejemplo valores leídos de un formulario o de un archivo CSV. La forma segura es usar Number:

const entradas = ["12", "7", "30"];
console.log(entradas.map(Number));

[ 12, 7, 30 ]

El problema aparece si usas parseInt de la misma manera:

console.log(["12", "7", "30"].map(parseInt));

[ 12, NaN, NaN ]

La causa es el segundo argumento. map() pasa el índice como segundo parámetro y parseInt lo interpreta como la base numérica. El primer elemento se convierte con base 0, que equivale a base 10; el segundo con base 1, que no existe; el tercero con base 2, donde “30” no es válido. La solución es controlar explícitamente qué recibe la función:

const enteros = ["12", "7", "30"].map((texto) => Number.parseInt(texto, 10));

Este ejemplo resume una regla útil: cuando pases una función por referencia a map(), asegúrate de que acepta, o ignora, los argumentos extra que va a recibir.

map() frente a forEach, filter, reduce y flatMap

map() forma parte de una familia de métodos de arreglos, y elegir el correcto hace el código más claro. La pregunta clave es qué quieres obtener.

Un error frecuente es usar map() solo para recorrer, ignorando su resultado. Si no vas a usar el arreglo devuelto, forEach() o un bucle for...of expresan mejor la intención y evitan crear un arreglo inútil:

// Poco claro: crea un arreglo que nadie usa
pedidos.map((pedido) => console.log(pedido.id));

// Claro
for (const pedido of pedidos) {
    console.log(pedido.id);
}

flatMap() merece una mención especial. Combina transformar y aplanar, lo que permite que un elemento produzca varios o ninguno. Es la forma idiomática de transformar y filtrar en un solo paso:

const frases = ["hola mundo", "map es útil"];
const palabras = frases.flatMap((frase) => frase.split(" "));

const pares = [1, 2, 3, 4].flatMap((n) => (n % 2 === 0 ? [n * 100] : []));

console.log(palabras, pares);

[ 'hola', 'mundo', 'map', 'es', 'útil' ] [ 200, 400 ]

Encadenar métodos para construir flujos de datos

Como map() y filter() devuelven arreglos, puedes encadenar métodos de arreglos para expresar una transformación completa como una secuencia de pasos legibles. Este estilo, heredado de la programación funcional, describe el qué en lugar del cómo:

const ventas = [
    { producto: "Café", unidades: 30, precio: 45 },
    { producto: "Té", unidades: 0, precio: 38 },
    { producto: "Chocolate", unidades: 12, precio: 52 },
];

const informe = ventas
    .filter(({ unidades }) => unidades > 0)
    .map(({ producto, unidades, precio }) => ({
        producto,
        ingreso: unidades * precio,
    }))
    .toSorted((a, b) => b.ingreso - a.ingreso)
    .map(({ producto, ingreso }) => `${producto}: ${ingreso}`);

const total = Math.sumPrecise(
    ventas.map(({ unidades, precio }) => unidades * precio)
);

console.log(informe, total);

[ 'Café: 1350', 'Chocolate: 624' ] 1974

El ejemplo usa dos incorporaciones recientes del lenguaje. toSorted(), de ES2023, ordena sin mutar el arreglo, a diferencia de sort(). Math.sumPrecise(), aprobado en ECMAScript 2026, suma números minimizando los errores de redondeo de coma flotante; antes de su llegada se usaba reduce() para lo mismo. Comprueba la compatibilidad en tus navegadores objetivo antes de usar las funciones más nuevas en producción.

Encadenar es expresivo, pero cada paso crea un arreglo intermedio. Con colecciones de cientos o miles de elementos la diferencia es despreciable; con millones, conviene medir, como verás en la sección de rendimiento.

map() en React: de datos a componentes

Si trabajas con React, map() es la herramienta estándar para renderizar listas en React: conviertes un arreglo de datos en un arreglo de elementos JSX. La única regla adicional es asignar a cada elemento una key estable que lo identifique entre renderizados:

function ListaTareas({ tareas }) {
    if (tareas.length === 0) {
        return <p>No hay tareas pendientes.</p>;
    }

    return (
        <ul>
            {tareas.map((tarea) => (
                <li key={tarea.id} className={tarea.completada ? "hecha" : ""}>
                    {tarea.titulo}
                </li>
            ))}
        </ul>
    );
}

La key debe ser un identificador propio del dato, como el id de la base de datos. Usar el índice del arreglo como clave funciona mientras la lista nunca cambie de orden, pero si insertas, eliminas o reordenas elementos, React puede asociar el estado al elemento equivocado, con síntomas como campos de formulario que muestran el valor de otra fila.

El mismo patrón de inmutabilidad visto con objetos es esencial al actualizar estado. Para marcar una tarea como completada, devuelve un arreglo nuevo con un objeto nuevo solo para el elemento que cambia:

function alternarTarea(tareas, idObjetivo) {
    return tareas.map((tarea) =>
        tarea.id === idObjetivo
            ? { ...tarea, completada: !tarea.completada }
            : tarea
    );
}

// Dentro de un componente
setTareas((actuales) => alternarTarea(actuales, id));

Los elementos que no cambian se devuelven tal cual, de modo que React puede detectar con una comparación de referencias qué partes de la interfaz necesitan actualizarse.

map() con promesas y código asíncrono

Combinar map() con funciones async es muy común y genera bastante confusión. El método no espera a nada: si el callback es asíncrono, devuelve inmediatamente un arreglo de promesas.

const ids = [1, 2, 3];

const resultado = ids.map(async (id) => {
    const respuesta = await fetch(`https://api.ejemplo.com/usuarios/${id}`);
    return respuesta.json();
});

console.log(resultado);

[ Promise { <pending> }, Promise { <pending> }, Promise { <pending> } ]

Para obtener los valores, espera todas las promesas con Promise.all(). Las peticiones se lanzan en paralelo y el resultado conserva el orden original:

const usuarios = await Promise.all(
    ids.map(async (id) => {
        const respuesta = await fetch(`https://api.ejemplo.com/usuarios/${id}`);
        if (!respuesta.ok)
            throw new Error(`Usuario ${id}: HTTP ${respuesta.status}`);
        return respuesta.json();
    })
);

Si una sola petición falla, Promise.all() rechaza todo el conjunto. Cuando prefieras obtener los resultados parciales, usa Promise.allSettled() y revisa el estado de cada una.

ECMAScript 2026 añadió Array.fromAsync(), que construye un arreglo a partir de una fuente asíncrona y acepta, como Array.from(), una función de mapeo como segundo argumento. A diferencia de Promise.all(), procesa los elementos uno tras otro, lo que resulta útil cuando no quieres saturar una API:

async function* paginas() {
    for (let pagina = 1; pagina <= 3; pagina++) {
        const respuesta = await fetch(
            `https://api.ejemplo.com/productos?pagina=${pagina}`
        );
        yield respuesta.json();
    }
}

const resumenes = await Array.fromAsync(
    paginas(),
    (pagina) => pagina.items.length
);
console.log(resumenes);

[ 20, 20, 7 ]

Más allá de los arreglos: iterables, Map, Set e iterator helpers

map() es un método de los arreglos, no de cualquier colección. Los objetos Map, Set, las listas de nodos del DOM o los generadores no lo tienen. Durante mucho tiempo la solución fue convertirlos antes a arreglo, y Array.from() sigue siendo la forma más directa porque admite una función de mapeo:

const etiquetasDom = Array.from(
    document.querySelectorAll("h2"),
    (h) => h.textContent
);

const stock = new Map([
    ["manzanas", 40],
    ["peras", 0],
]);
const lineas = Array.from(
    stock,
    ([fruta, cantidad]) => `${fruta}: ${cantidad}`
);

Desde ES2025, el lenguaje incluye iterator helpers: métodos como map(), filter() y take() disponibles directamente sobre los iteradores. Su ventaja es la evaluación perezosa: no crean arreglos intermedios y solo calculan los valores que realmente se consumen. Con ES2026 se sumó Iterator.concat() para encadenar varios iteradores:

function* numerosNaturales() {
    let n = 1;
    while (true) yield n++;
}

const primerosCuadradosPares = numerosNaturales()
    .map((n) => n * n)
    .filter((n) => n % 2 === 0)
    .take(4)
    .toArray();

console.log(primerosCuadradosPares);

[ 4, 16, 36, 64 ]

Con un arreglo esto sería imposible, porque la secuencia es infinita. Los iteradores solo calculan lo necesario para obtener los cuatro valores pedidos. Los iterator helpers están disponibles en las versiones actuales de los principales navegadores y en Node.js 22 o superior.

Para objetos literales, la combinación de Object.entries() y Object.fromEntries() permite aplicar map() sobre sus pares clave-valor:

const tarifas = { basica: 99, pro: 249, empresa: 899 };

const conDescuento = Object.fromEntries(
    Object.entries(tarifas).map(([plan, precio]) => [plan, precio * 0.8])
);

console.log(conDescuento);

{ basica: 79.2, pro: 199.2, empresa: 719.2 }

map() con TypeScript

TypeScript infiere el tipo del arreglo resultante a partir del valor que devuelve el callback, así que en la mayoría de casos no necesitas anotaciones adicionales:

interface Pedido {
    id: number;
    total: number;
}

const pedidos: Pedido[] = [
    { id: 1, total: 80 },
    { id: 2, total: 150 },
];

const totales = pedidos.map((p) => p.total); // number[]
const ids = pedidos.map((p) => `PED-${p.id}` as const); // `PED-${number}`[]

Cuando un callback puede devolver undefined, el tipo resultante lo refleja, y el compilador te obligará a manejarlo. Si quieres transformar y descartar valores a la vez, flatMap() produce un tipo más limpio que combinar map() con filter():

const codigos = ["A1", "", "B7"];

const validos = codigos.flatMap((codigo) =>
    codigo ? [codigo.toLowerCase()] : []
);
// string[]

Rendimiento: cuándo importa y cuándo no

Para la gran mayoría de aplicaciones, map() es lo bastante rápido y su claridad compensa cualquier diferencia frente a un bucle clásico. Los motores modernos optimizan muy bien estos métodos. Aun así, conviene conocer los límites.

Cada llamada a map() reserva un arreglo nuevo del tamaño del original. En cadenas largas de filter().map().map() sobre millones de elementos, los arreglos intermedios aumentan el uso de memoria y el trabajo del recolector de basura. Las alternativas son combinar pasos en un único map(), usar flatMap() para filtrar y transformar a la vez, recurrir a iterator helpers perezosos o, en rutas críticas, escribir un bucle for medido con datos reales.

const datos = Array.from({ length: 2_000_000 }, (_, i) => i);

console.time("cadena");
datos
    .filter((n) => n % 3 === 0)
    .map((n) => n * 2)
    .map((n) => n + 1);
console.timeEnd("cadena");

console.time("un solo paso");
datos.flatMap((n) => (n % 3 === 0 ? [n * 2 + 1] : []));
console.timeEnd("un solo paso");

console.time("bucle");
const resultado = [];
for (const n of datos) if (n % 3 === 0) resultado.push(n * 2 + 1);
console.timeEnd("bucle");

Los tiempos variarán según el motor y la máquina, así que no tomes ninguna regla como absoluta: mide en tu caso concreto antes de sacrificar legibilidad. Recuerda además que el trabajo que haces dentro del callback suele pesar mucho más que el propio recorrido; crear objetos Intl.NumberFormat o expresiones regulares en cada iteración, por ejemplo, es mucho más costoso que hacerlo una sola vez fuera.

Errores comunes y cómo evitarlos

Olvidar el return al usar llaves. Una función flecha con cuerpo entre llaves no devuelve nada salvo que lo indiques, y el resultado se llena de undefined:

const dobles = [1, 2, 3].map((n) => {
    n * 2;
});
console.log(dobles);

[ undefined, undefined, undefined ]

Escribe return n * 2; o elimina las llaves.

Devolver un objeto literal sin paréntesis. map((x) => { valor: x }) se interpreta como un bloque con una etiqueta llamada valor, no como un objeto. Envuélvelo: map((x) => ({ valor: x })).

Mutar los objetos dentro del callback. Como viste antes, el arreglo es nuevo, pero los objetos son los mismos. Usa el operador de propagación para crear copias.

Usar map() para filtrar. Devolver null o undefined para los elementos que no quieres no los elimina; el arreglo resultante mantiene la misma longitud. Usa filter() antes o flatMap().

Pasar funciones con parámetros opcionales por referencia. parseInt es el ejemplo clásico, pero cualquier función que acepte un segundo o tercer argumento puede comportarse de forma inesperada al recibir el índice y el arreglo.

Esperar que map() aguarde a las promesas. Un callback async produce un arreglo de promesas; necesitas Promise.all() o Array.fromAsync().

Ignorar los huecos de los arreglos dispersos. Un arreglo creado con new Array(3) no tiene elementos, así que map() no llama al callback:

console.log(new Array(3).map(() => "x"));
console.log(Array.from({ length: 3 }, () => "x"));

[ <3 empty items> ]
[ 'x', 'x', 'x' ]

Para generar arreglos a partir de una longitud, usa Array.from({ length }) con su función de mapeo.

Solución de problemas: mensajes de error frecuentes

El valor no es un arreglo:

TypeError: datos.map is not a function

Suele ocurrir cuando una API devuelve un objeto que envuelve la lista, como { resultados: [...] }, o cuando la variable es un Map, un Set o una NodeList. Inspecciona la respuesta y accede a la propiedad correcta, o convierte la colección con Array.from(). Puedes protegerte con Array.isArray(datos) antes de mapear.

El valor todavía no existe:

TypeError: Cannot read properties of undefined (reading 'map')

Es muy común en React cuando el componente se renderiza antes de que lleguen los datos. Inicializa el estado con un arreglo vacío o usa el encadenamiento opcional:

const [productos, setProductos] = useState([]);

return (
    <ul>
        {productos?.map((p) => (
            <li key={p.id}>{p.nombre}</li>
        ))}
    </ul>
);

Advertencia de claves en React:

Warning: Each child in a list should have a unique "key" prop.

Añade una propiedad key con un identificador estable y único a cada elemento devuelto por el callback. Si los datos no tienen identificador, genéralo al crearlos, no durante el renderizado.

Promesas pendientes en el resultado:

[ Promise { <pending> }, Promise { <pending> } ]

El callback es asíncrono. Envuelve la llamada en await Promise.all(...).

Una función no definida al compilar con TypeScript:

error TS2550: Property 'sumPrecise' does not exist on type 'Math'. Do you need to change your target library?

Tu configuración de TypeScript apunta a una versión antigua de la biblioteca estándar. Actualiza la opción lib o target en tsconfig.json a una edición que incluya la API, como ES2026 o ESNext, siempre que tu entorno de ejecución la soporte.

Buenas prácticas para código legible y mantenible

Más allá de evitar errores, algunas costumbres hacen que el código basado en map() sea más fácil de leer, revisar y depurar con el paso del tiempo.

Mantén los callbacks puros. Una función pura devuelve siempre el mismo resultado para la misma entrada y no modifica nada fuera de ella. Un callback que escribe en variables externas, hace peticiones o altera el DOM es difícil de razonar y rompe la promesa implícita de map(): transformar, no actuar.

Nombra las transformaciones complejas. Si el callback ocupa más de tres o cuatro líneas, extráelo a una función con un nombre que describa el resultado, como aFilaDeTabla o normalizarCliente. El encadenamiento se lee entonces casi como una frase y la función se puede probar de forma aislada:

const filas = clientesApi
    .filter(esClienteActivo)
    .map(normalizarCliente)
    .map(aFilaDeTabla);

Saca del callback lo que no depende del elemento. Formateadores, expresiones regulares, configuraciones y búsquedas en otras colecciones deben crearse una sola vez fuera del recorrido. Si dentro del callback buscas datos relacionados con find() en otro arreglo, convierte antes ese arreglo en un Map indexado por identificador para pasar de búsquedas lineales a accesos directos:

const categoriasPorId = new Map(categorias.map((c) => [c.id, c.nombre]));

const productosConCategoria = productos.map((p) => ({
    ...p,
    categoria: categoriasPorId.get(p.categoriaId) ?? "Sin categoría",
}));

Prefiere nombres de parámetro descriptivos. pedido, usuario o temperatura comunican mucho más que x o item, sobre todo cuando se encadenan varios pasos. Reserva las abreviaturas para transformaciones triviales de una sola línea.

Por último, acompaña las transformaciones importantes con pruebas unitarias. Como map() no tiene efectos secundarios, basta con comparar la entrada y la salida esperada, lo que hace estas pruebas rápidas y fiables.

Casos de uso reales

map() aparece en prácticamente cualquier capa de una aplicación. En el frontend, convierte respuestas de una API en componentes visuales, formatea fechas y monedas para mostrarlas y prepara datos para gráficos, que suelen esperar arreglos de pares { x, y }.

En el backend con Node.js, adapta registros de una base de datos al formato público de una API, eliminando campos internos o sensibles antes de enviarlos:

const respuestaPublica = usuarios.map(({ id, nombre, email }) => ({
    id,
    nombre,
    email,
}));

En procesamiento de datos, normaliza filas leídas de un CSV, convierte unidades y limpia cadenas antes de cargarlas en otro sistema. En pruebas automatizadas, genera conjuntos de casos a partir de una tabla de entradas y salidas esperadas.

También es la base de muchos patrones de estado inmutable, como los reductores de Redux o las actualizaciones de estado en React y otros frameworks, donde reemplazar un elemento de una lista sin mutarla es una operación diaria.

Conclusiones

Array.prototype.map() es una de las herramientas más expresivas de JavaScript. Su contrato es simple: aplica una función a cada elemento y devuelve un arreglo nuevo de la misma longitud, sin modificar el original. Esa simplicidad lo convierte en la pieza central de la manipulación de datos inmutable, desde transformar números y cadenas hasta remodelar objetos de una API o renderizar listas en React.

Dominarlo implica conocer también sus matices: los tres argumentos del callback y la trampa de parseInt, la diferencia entre crear un arreglo nuevo y copiar los objetos que contiene, el comportamiento con funciones asíncronas y la elección correcta frente a forEach(), filter(), reduce() o flatMap().

El lenguaje sigue evolucionando alrededor de esta idea. Los iterator helpers llevan el mismo estilo a secuencias perezosas e incluso infinitas, Array.fromAsync() y Math.sumPrecise() llegaron con ECMAScript 2026, y métodos como toSorted() refuerzan el enfoque sin mutaciones. Con estas herramientas puedes escribir transformaciones de datos claras, seguras y fáciles de mantener.