JS Array Iteration

JavaScript Array Iteration: map, filter, and reduce

JavaScript array iteration methods loop over elements cleanly without manual index counters. Functional methods like map(), filter(), and reduce() produce new values instead of mutating data in place, which makes state bugs far less likely.

Choosing the Right Iteration Method

Each array iteration method accepts a callback function that receives (element, index, array) on every pass. Pick the method that matches your exact output shape:

When chaining filter() followed by map(), keep callbacks pure and short. Avoid modifying external variables inside map() or filter() so your data pipeline stays easy to test.

Practical Pipeline Example

Chaining filter(), map(), and reduce() turns raw cart items into an accurate checkout total in just a few lines.

const cart = [
  { name: "USB Cable", price: 12, qty: 2, inStock: true },
  { name: "Laptop Stand", price: 45, qty: 1, inStock: false },
  { name: "Webcam", price: 60, qty: 1, inStock: true },
];

const availableNames = cart
  .filter((item) => item.inStock)
  .map((item) => item.name);

const availableTotal = cart
  .filter((item) => item.inStock)
  .reduce((sum, item) => sum + item.price * item.qty, 0);

console.log("Available:", availableNames);
console.log("Subtotal: $", availableTotal);

Common Mistakes to Avoid

• Using map() instead of forEach() for side effects: map() allocates a brand-new array; if you ignore the returned array, use forEach() or for...of.
• Forgetting return inside {} arrow callbacks: items.map(x => { x * 2 }) returns [undefined, ...]. Either omit braces x => x * 2 or write return x * 2;.
• Omitting initial value in reduce(): Calling [].reduce((a, b) => a + b) on an empty array throws a TypeError. Always pass an initial value like 0 or {}.

Frequently Asked Questions

Can I stop forEach() early with break?

No, break is invalid inside forEach(), and return only skips the current callback call. Use a for...of loop when you need early break control.

When should I prefer for...of over map() or reduce()?

Use for...of when you run await sequentially inside a loop or need to break out early on a condition.

Does map() skip empty slots in sparse arrays?

Yes, map(), filter(), and forEach() skip uninitialized holes in sparse arrays, though normal dense arrays never have holes.