Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
Array Iteration: forEach, map, filter
forEach, map, and filter are the three most important array methods. forEach executes a function for each element, map transforms each element into a new array, and filter keeps only elements that pass a test.
forEach, map, filter
- forEach(callback) - Runs function for each element. Returns undefined. Use for side effects (logging, DOM updates)
- map(callback) - Transforms each element. Returns NEW array. Original unchanged. Use for data transformation
- filter(callback) - Keeps elements where callback returns true. Returns NEW array. Use for searching/filtering
- Key difference - forEach has no return value. map and filter return new arrays
- Chaining - map and filter can be chained: array.filter(...).map(...)
forEach, map, filter Code
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// forEach - do something with each item (no return)
numbers.forEach((num, index) => {
console.log(`#${index}: ${num}`);
});
// map - transform into new array
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
const labels = numbers.map(n => `Item ${n}`);
console.log(labels); // ["Item 1", "Item 2", ...]
// filter - keep matching items
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4, 6, 8, 10]
const bigNums = numbers.filter(n => n > 5);
console.log(bigNums); // [6, 7, 8, 9, 10]
// Chaining: filter THEN map
const result = numbers
.filter(n => n % 2 === 0) // keep evens: [2, 4, 6, 8, 10]
.map(n => n * 10); // multiply by 10: [20, 40, 60, 80, 100]
console.log(result);
// Real-world: product list
const products = [
{ name: "Laptop", price: 999, inStock: true },
{ name: "Phone", price: 699, inStock: false },
{ name: "Tablet", price: 499, inStock: true },
];
const available = products
.filter(p => p.inStock)
.map(p => `${p.name}: ₹${p.price}`);
console.log(available); // ["Laptop: ₹999", "Tablet: ₹499"]Tip
Tip
Chain filter and map for powerful data pipelines: users.filter(u => u.active).map(u => u.name). Filter first to reduce the dataset, then map to transform. This reads like English: 'get names of active users'.
map/filter return new arrays; sort/splice mutate the original
Common Mistake
Warning
Using map when you should use forEach. If you don't need the returned array, use forEach - it's semantically correct. map creates a new array that gets thrown away if you don't use it, which wastes memory and confuses readers.
Practice Task
Note
Process a product list: (1) Use filter to get products under $500. (2) Use map to create display strings: 'Product Name - $Price'. (3) Chain filter + map to get names of in-stock items only. (4) Use forEach to log each result.
Quick Quiz
Key Takeaways
- forEach, map, and filter are the three most important array methods.
- forEach(callback) - Runs function for each element. Returns undefined. Use for side effects (logging, DOM updates)
- map(callback) - Transforms each element. Returns NEW array. Original unchanged. Use for data transformation
- filter(callback) - Keeps elements where callback returns true. Returns NEW array. Use for searching/filtering