13.1 Imperative vs. Declarative Array Processing

Before ES5 and ES6, processing array elements meant writing imperative for loops. In imperative programming, you tell the JavaScript engine how to step through every index, increment counter variables, boundary-check lengths, and manually accumulate results into temporary mutable state.

Modern JavaScript embraces declarative functional iteration. Instead of micro-managing indices, you pass a callback function that declares what should happen to each item. The engine handles memory navigation under the hood.

// ❌ Imperative: Manual index counter & mutating push buffer
const numbers = [1, 2, 3, 4, 5];
const squaredImperative = [];
for (let i = 0; i < numbers.length; i++) {
  squaredImperative.push(numbers[i] ** 2);
}

// ✅ Declarative: Pure 1-line transformation (immutable)
const squaredDeclarative = numbers.map(num => num ** 2);
console.log(squaredDeclarative); // [1, 4, 9, 16, 25]

13.2 forEach() — Iteration, Callbacks & The "No Break" Gotcha

The forEach() method executes a provided callback function once for each array element in ascending index order. It always returns undefined and does not produce a new array.

arr.forEach((currentValue, index, array) => {
  // currentValue: the element currently being processed
  // index: the zero-based index of currentValue
  // array: the original array forEach was called upon
});

const items = [10, 20, 30, 40];
items.forEach(val => {
  if (val === 30) return; // ⚠️ Does NOT stop the loop!
  console.log(val);       // Prints: 10, 20, 40
});

// ✅ If you need early termination with break, use for...of:
for (const val of items) {
  if (val === 30) break;  // Stops completely
}

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

// forEach executes a callback for each element; always returns undefined
fruits.forEach((fruit, index) => {
  console.log(`Index ${index}: ${fruit}`);
});

13.3 map() — The 1:1 Immutable Transformation Pipeline

map() creates a brand new array populated with the results of calling a provided function on every element in the calling array.

• Guaranteed Length: The output array always has the exact same length as the input array.
• Non-Mutating: The original array remains completely unmodified.
• Pure Functions: The callback should ideally be a pure function without side-effects.

const users = [
  { id: 101, firstName: "Ada", lastName: "Lovelace", score: 98 },
  { id: 102, firstName: "Alan", lastName: "Turing", score: 95 },
  { id: 103, firstName: "Grace", lastName: "Hopper", score: 99 }
];

// Map objects to formatted display strings
const leaderboard = users.map((u, i) => `#${i + 1} ${u.firstName} ${u.lastName} (${u.score} pts)`);
console.log(leaderboard);
// ["#1 Ada Lovelace (98 pts)", "#2 Alan Turing (95 pts)", "#3 Grace Hopper (99 pts)"]

13.4 filter() — The Boolean Predicate Selector

The filter() method creates a shallow copy of a portion of a given array, filtered down to just the elements that pass the test implemented by the provided predicate function.

If the callback returns a truthy value, the element is included in the new array. If it returns falsy, the element is omitted. If no elements pass, it returns an empty array [].

const inventory = [
  { name: "Laptop", price: 999, inStock: true },
  { name: "Keyboard", price: 79, inStock: false },
  { name: "Monitor", price: 299, inStock: true },
  { name: "Mouse", price: 39, inStock: false }
];

// Keep only affordable products currently in stock
const availableAffordable = inventory.filter(item => item.inStock && item.price < 300);
console.log(availableAffordable);
// [{ name: "Monitor", price: 299, inStock: true }]

// 💡 Pro Tip: Filter out all falsy values (null, undefined, 0, "", false) in one line:
const mixed = ["Alice", "", null, "Bob", undefined, 0, "Carol"];
const clean = mixed.filter(Boolean);
console.log(clean); // ["Alice", "Bob", "Carol"]

13.5 Architecture Diagram 1: The Map-Filter Data Pipeline

The declarative power of modern JavaScript stems from chaining pure methods. In this visual pipeline, a raw stream of data passes through a filter gate (which rejects elements not meeting criteria) and then through a map transformation stage.

13.6 reduce() & reduceRight() — The Swiss Army Accumulator

reduce() executes a user-supplied reducer callback on each element of the array, passing in the return value from the calculation on the preceding element. The final result is a single accumulated value (which can be a number, string, object, array, or map).

const result = arr.reduce((accumulator, currentValue, currentIndex, array) => {
  // return new accumulator value for the next iteration
  return accumulator + currentValue;
}, initialValue);

Four Essential Reduce Patterns

const prices = [19.99, 4.99, 9.99];
const total = prices.reduce((acc, p) => acc + p, 0);
console.log(total); // 34.97

const pets = [{t:'dog'}, {t:'cat'}, {t:'dog'}];
const byType = pets.reduce((acc, p) => {
  acc[p.t] = (acc[p.t] || 0) + 1;
  return acc;
}, {});
console.log(byType); // { dog: 2, cat: 1 }

const users = [{id: 'u1', n: 'Ada'}, {id: 'u2', n: 'Alan'}];
const userMap = users.reduce((acc, u) => {
  acc[u.id] = u;
  return acc;
}, {});
console.log(userMap['u1'].n); // "Ada" (O(1) lookup)

const matrix = [[1, 2], [3, 4], [5]];
const flat = matrix.reduce((acc, row) => acc.concat(row), []);
console.log(flat); // [1, 2, 3, 4, 5]

const cart = [
  { item: "Keyboard", price: 120, category: "Hardware" },
  { item: "Course Subscription", price: 49, category: "Software" },
  { item: "Mousepad", price: 15, category: "Hardware" }
];

// Summing prices with initialValue: 0
const total = cart.reduce((acc, curr) => acc + curr.price, 0);
console.log("Total:", total); // 184

13.7 Architecture Diagram 2: The Reduce Accumulator State Machine

Visualize how the accumulator acts as an active register passing state forward across sequential steps. At each clock-tick iteration, acc consumes the currentValue and produces the next state.

13.8 Search Heuristics: find(), findIndex(), findLast()

When searching for specific elements or objects by custom logic, JavaScript offers dedicated short-circuiting search methods that stop inspecting elements the moment a match is discovered.

const users = [{id: 1, v: false}, {id: 2, v: true}, {id: 3, v: true}];
const firstActive = users.find(u => u.v); // {id: 2, v: true}
const firstActiveIdx = users.findIndex(u => u.v); // 1

const lastActive = users.findLast(u => u.v); // {id: 3, v: true}
const lastActiveIdx = users.findLastIndex(u => u.v); // 2

const users = [
  { id: 101, name: "Alice", role: "Dev", active: false },
  { id: 102, name: "Bob", role: "Lead", active: true },
  { id: 103, name: "Charlie", role: "Dev", active: true },
  { id: 104, name: "Diana", role: "Lead", active: true }
];

const firstLead = users.find(u => u.role === "Lead");
const latestLead = users.findLast(u => u.role === "Lead");
console.log("First Lead:", firstLead.name);
console.log("Latest Lead:", latestLead.name);

13.9 Quantifiers: some() & every()

Quantifiers test assertions across an array and return a boolean. Both methods feature short-circuit optimization: they halt evaluation immediately once the outcome is mathematically decided.

const scores = [65, 82, 94, 58];
const hasHonor = scores.some(s => s >= 90); // true (stops at 94)
const hasFail = scores.some(s => s < 50);   // false

const allPassed = scores.every(s => s >= 50); // true
const allAStudents = scores.every(s => s >= 90); // false (stops at 65!)

const scores = [72, 85, 91, 64, 88];

const allPassed = scores.every(s => s >= 50);      // true
const hasDistinction = scores.some(s => s >= 90);  // true
console.log({ allPassed, hasDistinction });

13.10 Modern Array Utilities: flat(), flatMap() & Array.from()

const nested = [1, [2, [3, [4]]]];
console.log(nested.flat(2));        // [1, 2, 3, [4]]
console.log(nested.flat(Infinity)); // [1, 2, 3, 4]

// flatMap(): Splitting sentences into individual words
const sentences = ["Hello modern world", "JavaScript is awesome"];
const words = sentences.flatMap(s => s.split(" "));
console.log(words);
// ["Hello", "modern", "world", "JavaScript", "is", "awesome"]

// Generate sequential number range 1 to 5
const range = Array.from({ length: 5 }, (_, i) => i + 1);
console.log(range); // [1, 2, 3, 4, 5]

// Convert string to uppercase character array
const letters = Array.from("code", char => char.toUpperCase());
console.log(letters); // ["C", "O", "D", "E"]

const nested = [1, [2, [3, [4]]]];
console.log(nested.flat(Infinity)); // [1, 2, 3, 4]

const sentences = ["JavaScript arrays", "functional programming"];
const words = sentences.flatMap(s => s.split(" "));
console.log(words); // ["JavaScript", "arrays", "functional", "programming"]

13.11 Method Chaining & Performance Trade-offs

Because filter() and map() return new array instances, you can chain them into readable pipelines. However, in performance-critical loops with tens of thousands of items, each chained method allocates an intermediate garbage-collected array.

const totalTax = orders
  .filter(o => o.status === "completed") // intermediate arr 1
  .map(o => o.amount * 0.08)             // intermediate arr 2
  .reduce((sum, tax) => sum + tax, 0);

const totalTaxOptimized = orders.reduce((sum, o) => {
  if (o.status === "completed") {
    return sum + (o.amount * 0.08);
  }
  return sum;
}, 0);

const orders = [
  { id: "A", amount: 150, status: "completed" },
  { id: "B", amount: 45, status: "pending" },
  { id: "C", amount: 200, status: "completed" },
  { id: "D", amount: 90, status: "completed" }
];

const grandTotal = orders
  .filter(o => o.status === "completed")
  .map(o => o.amount * 1.10)
  .reduce((acc, curr) => acc + curr, 0);

console.log("Grand Total with Tax:", grandTotal); // 484

13.12 Interactive Mini-Labs

13.13 Coding Challenge: Enterprise Inventory & Sales Aggregator

Write a function aggregateTransactions(transactions) that processes an array of e-commerce order objects:

function aggregateTransactions(transactions) {
  // Step 1: Filter out cancelled transactions
  const activeOrders = transactions.filter(t => t.status !== "cancelled");

  // Step 2 & 4: Calculate total & group by category using reduce in a single pass
  const summary = activeOrders.reduce((acc, order) => {
    // Accumulate total gross revenue
    acc.grossRevenue += order.amount;

    // Accumulate category subtotal
    acc.byCategory[order.category] = (acc.byCategory[order.category] || 0) + order.amount;

    return acc;
  }, { grossRevenue: 0, byCategory: {} });

  // Step 3: Compute VAT tax (10%)
  const taxPayable = Number((summary.grossRevenue * 0.10).toFixed(2));

  return {
    orderCount: activeOrders.length,
    grossRevenue: Number(summary.grossRevenue.toFixed(2)),
    taxPayable: taxPayable,
    categoryBreakdown: summary.byCategory
  };
}

// ── Sample Test ──
const sampleOrders = [
  { id: 1, category: "tech", amount: 250, status: "completed" },
  { id: 2, category: "apparel", amount: 80, status: "completed" },
  { id: 3, category: "tech", amount: 150, status: "cancelled" },
  { id: 4, category: "apparel", amount: 120, status: "completed" }
];

console.log(aggregateTransactions(sampleOrders));
/* Output:
{
  orderCount: 3,
  grossRevenue: 450,
  taxPayable: 45,
  categoryBreakdown: { tech: 250, apparel: 200 }
}
*/