Dos mètodes d’Array, dos propòsits molt diferents. Triar el correcte comunica la teva intenció a altres desenvolupadors (i al teu jo del futur).
map(): El Transformador
Utilitza .map quan vulguis transformar dades.
- Entrada: Un array d’X elements.
- Sortida: Un nou array d’X elements transformats.
- Intenció: “Vull convertir això en allò”.
javascript
const prices = [10, 20, 30];
const formatted = prices.map(price => `${price}€`);
// resultat: ["10€", "20€", "30€"]const prices = [10, 20, 30];
const formatted = prices.map(price => `${price}€`);
// resultat: ["10€", "20€", "30€"]forEach(): L’Executor
Utilitza .forEach quan vulguis executar una acció (side effect) per cada element.
- Entrada: Un array.
- Sortida:
undefined(res). - Intenció: “Vull que passi alguna cosa amb aquestes dades (guardar a DB, pintar al DOM, loguejar)”.
No retorna res, així que no pots encadenar-lo ni assignar el seu resultat a una variable.
javascript
const buttons = document.querySelectorAll('button');
buttons.forEach(btn => {
// Acció: Modificar el DOM (Side Effect)
btn.addEventListener('click', () => console.log('Click!'));
});const buttons = document.querySelectorAll('button');
buttons.forEach(btn => {
// Acció: Modificar el DOM (Side Effect)
btn.addEventListener('click', () => console.log('Click!'));
});Resum Ràpid
- Necessites un array nou? ->
map - Només vols iterar i fer coses? ->
forEach