Dominar la iteración sobre arrays es fundamental para cualquier persona que trabaje con JavaScript. Dos métodos destacan por su capacidad de recorrer elementos sin modificar el array original: map y forEach. Aunque ambos ejecutan una función sobre cada elemento, su comportamiento y lo que devuelven es completamente distinto, y entender esa diferencia marca un antes y un después en la forma de escribir código limpio.
¿Cómo funciona el método map en JavaScript?
El método map es uno de los más utilizados en arrays. Su propósito es aplicar una función a cada elemento y construir un nuevo array con los resultados [01:00]. El array original permanece intacto, lo que lo convierte en una herramienta segura cuando no queremos mutar datos.
Por ejemplo, dado un array de números del uno al cinco, se puede elevar cada número al cuadrado:
javascript
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(num => num * num);
console.log(numbers); // [1, 2, 3, 4, 5]
console.log(squaredNumbers); // [1, 4, 9, 16, 25]
- Cada elemento pasa por la arrow function que lo multiplica por sí mismo.
- El resultado se almacena en un nuevo array sin alterar el original.
- La función recibe como parámetro cada valor de forma individual.
Este patrón es especialmente útil cuando necesitas transformar datos y conservar la referencia original.
¿Qué diferencia a forEach de map?
El método forEach también itera sobre cada elemento y ejecuta una función proporcionada, pero no devuelve un nuevo array [03:28]. Su valor de retorno es undefined. Esto significa que sirve para ejecutar acciones secundarias, como imprimir valores, pero no para generar una nueva colección.
javascript
const colors = ['red', 'pink', 'blue'];
const iteratedColors = colors.forEach(color => console.log(color));
console.log(colors); // ['red', 'pink', 'blue']
console.log(iteratedColors); // undefined
- El console.log dentro del callback imprime cada color: red, pink, blue.
- Sin embargo, la variable
iteratedColors queda como indefinido.
- El array original tampoco sufre modificación alguna.
La clave está en que forEach ejecuta efectos secundarios, mientras que map produce un resultado almacenable.
¿Cuándo usar map y cuándo forEach en ejercicios prácticos?
¿Cómo convertir temperaturas de Fahrenheit a Celsius con map?
Cuando necesitas un array nuevo con valores transformados, map es la elección correcta [05:15]. En este ejercicio se toman temperaturas en Fahrenheit y se aplica la fórmula (5/9) * (fahrenheit - 32) a cada elemento:
javascript
const temperaturasEnFahrenheit = [32, 68, 95, 212];
const temperaturasEnCelsius = temperaturasEnFahrenheit.map(
fahrenheit => (5 / 9) * (fahrenheit - 32)
);
console.log(temperaturasEnFahrenheit); // [32, 68, 95, 212]
console.log(temperaturasEnCelsius); // [0, 20, 35, 100]
- Se obtiene un array nuevo con las temperaturas convertidas.
- El array original no se muta en ningún momento.
- Cada posición del nuevo array corresponde al resultado de aplicar la fórmula sobre la posición equivalente del original.
¿Cómo sumar todos los elementos de un array con forEach?
Cuando el objetivo no es crear un array sino acumular un valor, forEach resulta más adecuado [08:05]. Aquí se calcula la suma de todos los números:
javascript
const newNumbers = [1, 2, 3, 4, 5];
let suma = 0;
newNumbers.forEach(number => {
suma += number;
});
console.log(newNumbers); // [1, 2, 3, 4, 5]
console.log(suma); // 15
- La variable
suma se inicializa en cero y se incrementa con cada iteración.
- El operador
+= es un atajo para suma = suma + number.
- No se necesita un array de salida, solo un valor acumulado.
La regla general es sencilla: si necesitas un nuevo array transformado, usa map. Si necesitas ejecutar una acción por cada elemento sin generar un array, usa forEach. Cuéntanos en los comentarios si lograste identificar cuál método correspondía a cada ejercicio antes de ver la solución.
