Lesson 13 · 13 of 20

forEach, map and filter · JavaScript

Loop over and transform JavaScript arrays without manual loops: forEach for each element, map to build a new array and filter to keep just a few.

JavaScript · forEach, map and filter in DMarlon Studio: the example's code and its output in the terminal

Arrays have methods that take a function and apply it to each element. `forEach()` runs it once per product, with the element and its position (p, i), and returns nothing: it is for doing something with each one, such as printing it.

`map()` builds a new array with whatever the function returns for each element, the same size as the original. products.map((p) => p.name) gives the list of names, and the second map works out the prices with VAT.

`filter()` builds a new array with only the elements for which the function returns true. p.stock > 0 keeps the products in stock and p.price < 50 the cheap ones.

Because filter and map return arrays, you can chain them: first keep the products in stock that cost over 50 euros, then give them a 10% discount. Neither touches the original array, which still has its five products.

These methods with arrow functions are the usual way to work with lists in JavaScript, including rendering lists of items in React.

Code · 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");

Output · 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

Key points

forEach does something with each element and returns nothing.
map returns a new, transformed array of the same size.
filter returns a new array with the elements that pass the test.
They chain: .filter(...).map(...).
The original array does not change.

Exercise

Use filter and map to get the names in capitals of the products under 100 euros, and forEach to print the ones that are out of stock.