Lección 13 · 13 de 20

forEach, map y filter · JavaScript

Recorra y transforme arrays en JavaScript sin bucles manuales: forEach para cada elemento, map para crear otro array y filter para quedarse con unos pocos.

JavaScript · forEach, map y filter en DMarlon Studio: el código del ejemplo y su salida en la terminal

Los arrays tienen métodos que reciben una función y la aplican a cada elemento. `forEach()` la ejecuta una vez por producto, con el elemento y su posición (p, i), y no devuelve nada: sirve para hacer algo con cada uno, como escribirlo.

`map()` crea un array nuevo con lo que devuelva la función para cada elemento, del mismo tamaño que el original. products.map((p) => p.name) saca la lista de nombres y el segundo map calcula los precios con IVA.

`filter()` crea un array nuevo solo con los elementos para los que la función devuelve true. p.stock > 0 deja los productos que hay en el almacén y p.price < 50 los baratos.

Como filter y map devuelven arrays, se pueden encadenar: primero se filtran los productos con existencias y de más de 50 euros, y después se les pone el precio rebajado un 10 %. Ninguno de los dos toca el array original, que sigue teniendo sus cinco productos.

Estos métodos con funciones flecha son la forma habitual de trabajar con listas en JavaScript, también para pintar listas de elementos en React.

Código · main.js

const products = [  { name: "Keyboard", price: 45, stock: 12 },  { name: "Mouse", price: 20, stock: 0 },  { name: "Monitor", price: 180, stock: 4 },  { name: "Webcam", price: 60, stock: 0 },  { name: "Headset", price: 75, stock: 7 },];// forEach runs a function for every element (and returns nothing).products.forEach((p, i) => {  console.log(`${i + 1}. ${p.name} - ${p.price} euros`);});// map builds a NEW array with one result per element.const names = products.map((p) => p.name);console.log("Names:", names);const withVat = products.map((p) => (p.price * 1.21).toFixed(2));console.log("With VAT:", withVat);// filter keeps only the elements for which the function returns true.const inStock = products.filter((p) => p.stock > 0);console.log("In stock:", inStock.map((p) => p.name));const cheap = products.filter((p) => p.price < 50);console.log("Under 50 euros:", cheap.length, "products");// Chaining: filter first, then map. The original stays the same.const sale = products  .filter((p) => p.stock > 0 && p.price > 50)  .map((p) => `${p.name} at ${p.price * 0.9}`);console.log("On sale (-10%):", sale);console.log("The original still has", products.length, "products");

Salida · node main.js

1. Keyboard - 45 euros
2. Mouse - 20 euros
3. Monitor - 180 euros
4. Webcam - 60 euros
5. Headset - 75 euros
Names: [ 'Keyboard', 'Mouse', 'Monitor', 'Webcam', 'Headset' ]
With VAT: [ '54.45', '24.20', '217.80', '72.60', '90.75' ]
In stock: [ 'Keyboard', 'Monitor', 'Headset' ]
Under 50 euros: 2 products
On sale (-10%): [ 'Monitor at 162', 'Headset at 67.5' ]
The original still has 5 products

Para recordar

forEach hace algo con cada elemento y no devuelve nada.
map devuelve un array nuevo transformado, del mismo tamaño.
filter devuelve un array nuevo con los que cumplen la condición.
Se pueden encadenar: .filter(...).map(...).
El array original no cambia.

Ejercicio

Con filter y map, obtenga los nombres en mayúsculas de los productos de menos de 100 euros, y con forEach escriba los que están agotados.