JavaScript — Array Iteration

From loops to pipelines

Every loop that "visits items" is really doing one of four jobs: do something, transform, select, or summarize. Array methods name those jobs.

forEach — do something with each

const names = ["Ada", "Bo", "Cleo"];

names.forEach((name, index) => {
    console.log(`${index + 1}. ${name}`);
});
// 1. Ada · 2. Bo · 3. Cleo

Returns undefined — purely for side effects (logging, DOM updates). You can't chain after it.

map — transform every item

const prices = [10, 20, 30];

const withTax = prices.map(p => p * 1.2);
// [12, 24, 36]   ← NEW array, original untouched

const users = [{ first: "Ada", last: "Lovelace" }, { first: "Bo", last: "Dylan" }];
users.map(u => `${u.first} ${u.last}`);   // ["Ada Lovelace", "Bo Dylan"]

Same length out as in — each item becomes something else.

filter — keep the matches

const nums = [5, 12, 8, 130, 44];

nums.filter(n => n > 10);          // [12, 130, 44]
words.filter(w => w.length <= 3);
products.filter(p => p.inStock && p.price < 100);

Predicate returns true → item survives. Length can shrink; order preserved; original untouched.

find vs filter — one vs many

users.find(u => u.age > 30);      // FIRST match (the object itself)
users.filter(u => u.age > 30);    // ALL matches (array)

reduce — collapse to one value

The Swiss army knife:

const total = [10, 20, 30].reduce((sum, n) => sum + n, 0);
//                                   ── accumulator + item   start
// walks: 0+10=10 → 10+20=30 → 30+30=60

Beyond sums:

const max = nums.reduce((a, b) => Math.max(a, b));
const counts = words.reduce((acc, w) => {
    acc[w] = (acc[w] ?? 0) + 1;
    return acc;
}, {});                              // frequency map

If reduce feels abstract today: map+filter cover 90% of daily needs; grow into reduce.

some / every — quick verdicts

[18, 22, 16].some(a => a >= 18);    // true  — at least one adult
[18, 22, 16].every(a => a >= 18);   // false — not ALL adults

Short-circuit on first decisive answer — cheaper than filtering for existence checks.

The pipeline pattern

Methods chain because each returns an array:

const result = products
    .filter(p => p.stock > 0)
    .sort((a, b) => a.price - b.price)
    .slice(0, 3)                       // cheapest three in stock
    .map(p => p.name);

console.log(result.join(", "));

Read vertically like recipe steps. This style replaces most manual loops in modern codebases — and it's the backbone of React rendering lists.

Common mistakes: using map when you mean forEach (then ignoring results); forgetting the 0 initial value in reduce on empty arrays; mutating inside map.

Mini Practice

1. Triple every number with map; prove original unchanged
2. Filter emails array down to gmail addresses only
3. Sum product prices × quantities with reduce
4. some/every validator: does every cart item exceed $5?
5. Full pipeline: filter in-stock → sort by rating desc → top 3 names joined

Next: dates →