Map vs forEach en JavaScript: Cuándo y Cómo Utilizarlos

¿Qué son los métodos map y forEach en JavaScript?

Si llevas un tiempo programando en JavaScript, seguramente ya te has topado con map() y forEach(). Son dos de esos métodos que ves por todos lados, pero ¿sabes realmente cuándo usar cada uno? Te voy a ser honesto: al principio yo los usaba casi intercambiablemente hasta que entendí sus diferencias reales.

Aunque parecen similares, cada uno tiene su propósito específico. Lo importante es saber cuándo usar cada uno para escribir código que no solo funcione, sino que tenga sentido.

El método forEach: tu compañero para recorrer arrays

El forEach() es como ese amigo confiable que siempre está ahí cuando necesitas hacer algo con cada elemento de un array. Es simple, directo, y hace exactamente lo que dice: "por cada elemento, haz esto".

Cómo funciona forEach

La sintaxis es súper clara:

array.forEach(function(elemento, índice, array) {
    // código a ejecutar para cada elemento
});

Donde:

• elemento: El valor actual del array que está siendo procesado
• índice (opcional): La posición del elemento dentro del array
• array (opcional): Referencia al array sobre el que se llamó a forEach

Ejemplos que uso en mi día a día

Ejemplo 1: Imprimir elementos de un array

const frutas = ['pera', 'coco', 'naranja'];

frutas.forEach(function(fruta) {
    console.log(fruta);
});

// Resultado:
// pera
// coco
// naranja

Ejemplo 2: Acceder al índice

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

numeros.forEach(function(numero, indice) {
    console.log(`Elemento en posición ${indice}: ${numero}`);
});

// Resultado:
// Elemento en posición 0: 1
// Elemento en posición 1: 2
// ...

Ejemplo 3: Calcular una suma con forEach

const precios = [19.99, 9.99, 29.99];
let total = 0;

precios.forEach(precio => {
    total += precio;
});

console.log(`Total: $${total.toFixed(2)}`); // Total: $59.97

El método map: el transformador de datos

Aquí es donde las cosas se ponen interesantes. Si forEach es tu amigo confiable, map() es el mago que transforma tus datos. Lo que más me gusta de map es que siempre te devuelve un nuevo array - nunca te deja con las manos vacías.

Cómo funciona map

const nuevoArray = array.map(function(elemento, índice, array) {
    // código que transforma el elemento
    return elementoTransformado;
});

Ojo, la función debe retornar algo. Si no, vas a terminar con un array lleno de undefined.

Ejemplos prácticos que uso todo el tiempo

Ejemplo 1: Crear un array con valores duplicados

const numeros = [1, 2, 3, 4, 5];
const duplicados = numeros.map(function(numero) {
    return numero * 2;
});

console.log(duplicados); // [2, 4, 6, 8, 10]

Ejemplo 2: Extraer propiedades de objetos

const usuarios = [
    { nombre: 'Ana', edad: 28 },
    { nombre: 'Juan', edad: 34 },
    { nombre: 'María', edad: 22 }
];

const nombresUsuarios = usuarios.map(usuario => usuario.nombre);
console.log(nombresUsuarios); // ['Ana', 'Juan', 'María']

Ejemplo 3: Formatear datos

const precios = [100, 200, 300];
const preciosFormateados = precios.map(precio => {
    return `$${precio.toFixed(2)}`;
});

console.log(preciosFormateados); // ['$100.00', '$200.00', '$300.00']

Map vs forEach: las diferencias que importan

Aquí viene lo importante. La diferencia principal es simple: forEach hace algo con cada elemento, map crea algo nuevo. Pero vamos a verlo en detalle:

El poder del encadenamiento con map

Una de las cosas que más me gusta de map es que puedes encadenar métodos como si estuvieras armando un pipeline:

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

const resultado = numeros
    .map(num => num * 2)
    .filter(num => num > 5)
    .reduce((acc, num) => acc + num, 0);

console.log(resultado); // 22 (6 + 8 + 10)

Con forEach esto no funciona porque devuelve undefined. Créeme, he intentado encadenar después de un forEach y no es nada bonito.

¿Cuándo usar cada uno?

En mi experiencia, la regla es bastante simple:

Usa forEach cuando:

• Solo necesitas hacer algo con cada elemento (como imprimir, actualizar el DOM, etc.)
• No necesitas crear un nuevo array
• Quieres que el código sea claro sobre sus intenciones

// Ejemplo: Actualizar elementos del DOM
const elementos = document.querySelectorAll('.item');
const items = ['Item 1', 'Item 2', 'Item 3'];

items.forEach((item, i) => {
    elementos[i].textContent = item;
});

Usa map cuando:

• Necesitas transformar datos
• Quieres crear un nuevo array basado en el original
• Vas a encadenar más operaciones después

// Ejemplo: Preparar datos para una API
const datosUsuarios = [
    { id: 1, nombre: 'Ana' },
    { id: 2, nombre: 'Juan' }
];

const datosParaAPI = datosUsuarios.map(usuario => ({
    userId: usuario.id,
    name: usuario.nombre,
    active: true
}));

Rendimiento: ¿realmente importa?

Honestamente, para la mayoría de casos no vas a notar diferencia en el rendimiento. map usa un poco más de memoria porque crea un nuevo array, pero a menos que estés procesando millones de elementos, no te va a quitar el sueño.

Lo importante es usar el método que mejor exprese lo que quieres hacer. El código claro vale más que micro-optimizaciones.

Casos de uso avanzados

Combinando ambos métodos

A veces necesitas usar los dos juntos:

// Procesar datos y luego actualizar la UI
const datos = [10, 20, 30];

// Primero transformamos con map
const datosFormateados = datos.map(valor => valor * 1.1);

// Luego actualizamos la UI con forEach
datosFormateados.forEach((valor, i) => {
    document.getElementById(`valor-${i}`).textContent = `$${valor.toFixed(2)}`;
});

Cuidado con las funciones asíncronas

Aquí es donde muchos se tropiezan. Si usas forEach con async/await, las promesas se ejecutan en paralelo:

// forEach con promesas (se ejecutan en paralelo)
const urls = ['url1', 'url2', 'url3'];
urls.forEach(async url => {
    const respuesta = await fetch(url);
    console.log(await respuesta.json());
});

// Para ejecución secuencial, mejor usar for...of
// o crear una función con map y Promise.all

Mi reflexión final

Después de años usando ambos métodos, te puedo decir que la clave está en entender su propósito. forEach es para ejecutar acciones, map es para transformar datos. Una vez que internalizas esto, elegir entre uno y otro se vuelve automático.

No hay uno "mejor" que el otro - son herramientas diferentes para trabajos diferentes. Lo importante es usar el que mejor comunique tu intención. Tu yo del futuro (y tus compañeros de equipo) te lo agradecerán.