🔄 Iteration Methods (map, filter, reduce)

Declarative vs. Imperative

A traditional for loop is imperative — you spell out the counter, the bound, the increment, and the indexing. Iteration methods are declarative — you hand a small function to the array and let it do the walking. The result is code that expresses intent, not mechanics.

Their shared advantages:

• Readability — the callback names the operation (double, keep-evens, total).
• Immutability — map, filter, and friends return new arrays and leave the source alone.
• Chainability — because each returns an array, you can pipe one into the next.

forEach — Side Effects

forEach() runs a callback once per element. It's the declarative cousin of a for loop, meant for side effects (logging, updating the DOM) — not for producing a value.

const fruits = ["Apple", "Banana", "Cherry"];

fruits.forEach((fruit, index) => {
  console.log(`${index}: ${fruit}`);
});
// 0: Apple
// 1: Banana
// 2: Cherry

map — Transform

map() builds a new array by running each element through your function. One in, one out — the output array always has the same length as the input.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled);  // [2, 4, 6, 8, 10]
console.log(numbers);  // [1, 2, 3, 4, 5] — original untouched

// Transforming objects — a very common real-world job
const users = [
  { id: 1, name: "John", age: 30 },
  { id: 2, name: "Jane", age: 25 }
];
const names = users.map(u => u.name);                 // ["John", "Jane"]
const cards = users.map(u => ({ id: u.id, label: u.name.toUpperCase() }));

filter — Select

filter() returns a new array containing only the elements for which your callback returns a truthy value. Think of it as a sieve: matches pass through, everything else is left behind.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evens = numbers.filter(n => n % 2 === 0);   // [2, 4, 6, 8, 10]
const big   = numbers.filter(n => n > 5);         // [6, 7, 8, 9, 10]

// Filtering objects with combined conditions
const products = [
  { name: "Laptop", price: 999, inStock: true },
  { name: "Tablet", price: 399, inStock: false },
  { name: "Headphones", price: 199, inStock: true }
];
const affordableInStock = products.filter(p => p.price < 500 && p.inStock);
console.log(affordableInStock); // [{ name: "Headphones", ... }]

reduce — Aggregate

reduce() is the most powerful and most misunderstood of the group. It walks the array carrying an accumulator from one step to the next, folding everything into a single result — a number, an object, even another array.

const numbers = [1, 2, 3, 4, 5];

// (accumulator, current) => nextAccumulator ; second arg is the INITIAL value
const sum = numbers.reduce((acc, n) => acc + n, 0);
console.log(sum); // 15

Beyond sums: counting and grouping

// Frequency counter — accumulator is an object
const fruits = ["apple", "banana", "apple", "orange", "banana", "apple"];
const counts = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});
console.log(counts); // { apple: 3, banana: 2, orange: 1 }

// Group objects by a property
const people = [
  { name: "Alice", dept: "Engineering" },
  { name: "Bob",   dept: "Marketing" },
  { name: "Eve",   dept: "Engineering" }
];
const byDept = people.reduce((acc, person) => {
  (acc[person.dept] ||= []).push(person);
  return acc;
}, {});
// { Engineering: [Alice, Eve], Marketing: [Bob] }

some, every & flatMap

some() and every() — boolean tests

some() returns true if at least one element passes; every() returns true only if all do. Both short-circuit — they stop as soon as the answer is settled.

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.some(n => n % 2 === 0));  // true  — 2 is even
console.log(numbers.every(n => n > 0));       // true  — all positive

// Form validation reads naturally
const fields = [
  { name: "username", valid: true },
  { name: "password", valid: false }
];
const formValid = fields.every(f => f.valid);
console.log(formValid ? "Submit" : "Fix errors"); // "Fix errors"

flatMap() — map then flatten one level

const sentences = ["Hello world", "How are you"];
const words = sentences.flatMap(s => s.split(" "));
console.log(words); // ["Hello", "world", "How", "are", "you"]

// Expand nested data — flatMap shines when each item yields 0..n results
const userPosts = [
  { user: "Alice", posts: ["Post 1", "Post 2"] },
  { user: "Bob",   posts: ["Post 3"] },
  { user: "Carol", posts: [] }
];
const feed = userPosts.flatMap(u =>
  u.posts.map(p => ({ author: u.user, content: p }))
);
// [{author:"Alice",content:"Post 1"}, {author:"Alice",content:"Post 2"}, {author:"Bob",content:"Post 3"}]

Method Chaining

Because map and filter each return an array, you can chain them into a readable pipeline that reads top-to-bottom like a description of the query.

const products = [
  { name: "Laptop", price: 999, inStock: true,  category: "Electronics" },
  { name: "Phone",  price: 699, inStock: true,  category: "Electronics" },
  { name: "Tablet", price: 399, inStock: false, category: "Electronics" },
  { name: "Headphones", price: 199, inStock: true, category: "Electronics" }
];

// Names of the top 2 most expensive in-stock electronics
const topPicks = products
  .filter(p => p.category === "Electronics" && p.inStock)
  .sort((a, b) => b.price - a.price)
  .slice(0, 2)
  .map(p => p.name);

console.log(topPicks); // ["Laptop", "Phone"]

Hands-on Exercise

const records = [
  { student: "Ana", subject: "Math",    score: 92 },
  { student: "Ana", subject: "Science", score: 88 },
  { student: "Ben", subject: "Math",    score: 74 },
  { student: "Ben", subject: "Science", score: 80 },
  { student: "Cy",  subject: "Math",    score: 61 }
];

const grouped = records.reduce((acc, r) => {
  (acc[r.student] ||= []).push(r.score);
  return acc;
}, {});

const letter = avg =>
  avg >= 90 ? "A" : avg >= 80 ? "B" : avg >= 70 ? "C" : "D";

const report = Object.entries(grouped)
  .map(([student, scores]) => {
    const avg = scores.reduce((s, n) => s + n, 0) / scores.length;
    return { student, average: Math.round(avg), grade: letter(avg) };
  })
  .sort((a, b) => b.average - a.average);

console.log(report);
// [ { student: "Ana", average: 90, grade: "A" },
//   { student: "Ben", average: 77, grade: "C" },
//   { student: "Cy",  average: 61, grade: "D" } ]

Best Practices

Summary & Quiz

📚 Further Reading

• MDN — Array.prototype.map()
• MDN — Array.prototype.reduce()
• MDN — Array.prototype.filter()

🚀 What's Next?

You've written a lot of short arrow-function callbacks in this lesson. Next we look at arrow functions in depth — their concise syntax and, crucially, how they capture this lexically, which is what makes them so natural inside these iteration methods.