Dos métodos de Array, dos propósitos muy distintos. Elegir el correcto comunica tu intención a otros desarrolladores (y a tu yo del futuro).
map(): El Transformador
Usa .map cuando quieras transformar datos.
- Entrada: Un array de X elementos.
- Salida: Un nuevo array de X elementos transformados.
- Intención: “Quiero convertir esto en aquello”.
javascript
const prices = [10, 20, 30];
const formatted = prices.map(price => `${price}€`);
// resultado: ["10€", "20€", "30€"]const prices = [10, 20, 30];
const formatted = prices.map(price => `${price}€`);
// resultado: ["10€", "20€", "30€"]forEach(): El Ejecutor
Usa .forEach cuando quieras ejecutar una acción (side effect) por cada elemento.
- Entrada: Un array.
- Salida:
undefined(nada). - Intención: “Quiero que pase algo con estos datos (guardar en DB, pintar en DOM, loguear)”.
No devuelve nada, así que no puedes encadenarlo ni asignar su resultado a una variable.
javascript
const buttons = document.querySelectorAll('button');
buttons.forEach(btn => {
// Acción: Modificar el DOM (Side Effect)
btn.addEventListener('click', () => console.log('Click!'));
});const buttons = document.querySelectorAll('button');
buttons.forEach(btn => {
// Acción: Modificar el DOM (Side Effect)
btn.addEventListener('click', () => console.log('Click!'));
});Resumen Rápido
- ¿Necesitas un array nuevo? ->
map - ¿Solo quieres iterar y hacer cosas? ->
forEach