Engineering Fluency OS

Why This Matters

You've learned for loops and while loops. You've seen map, filter, and reduce. But iteration in real code goes deeper. Modern languages provide powerful abstractions for processing data: iterators that produce values on demand, higher-order functions that compose operations, and method chaining that reads like a data pipeline.

Understanding these patterns is the difference between writing code that works and writing code that's clean, efficient, and maintainable. Every data transformation in production code uses these ideas.

Define Terms

Visual Model

[10, 20, 30, 40, 50]

.filter(x > 20)

[30, 40, 50]

.map(x * 2)

[60, 80, 100]

.reduce(sum)

240

The full process at a glance. Click Start tour to walk through each step.

A data pipeline: filter → map → reduce. Each step transforms the data and passes it to the next.

Code Example

Code

// HIGHER-ORDER FUNCTIONS: functions that take functions
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// forEach: execute a side effect for each element
numbers.forEach(n => console.log(n * n));

// find: get the first element matching a condition
const firstEven = numbers.find(n => n % 2 === 0);
console.log(firstEven);  // 2

// some / every: boolean tests on the whole array
console.log(numbers.some(n => n > 5));   // true
console.log(numbers.every(n => n > 0));  // true

// METHOD CHAINING: compose operations fluently
const result = numbers
  .filter(n => n % 2 === 0)     // keep even: [2,4,6,8,10]
  .map(n => n * 3)               // triple: [6,12,18,24,30]
  .reduce((sum, n) => sum + n, 0); // sum: 90
console.log(result);  // 90

// ITERATORS: for...of works with any iterable
const word = "hello";
for (const char of word) {
  process.stdout.write(char.toUpperCase());
}
console.log();  // HELLO

// GENERATORS: lazy iterators (produce values on demand)
function* range(start, end) {
  for (let i = start; i < end; i++) {
    yield i;
  }
}
for (const n of range(1, 5)) {
  console.log(n);  // 1, 2, 3, 4
}

Interactive Experiment

Try these exercises:

Chain .filter() and .map() to get the squares of all odd numbers from 1-20.
Use .reduce() to find the maximum value in an array (without Math.max).
Write a generator function that yields the Fibonacci sequence indefinitely.
Compare: write the same logic as (1) a for loop, (2) a chain of array methods, (3) a generator. Which reads better?
Use .find() to locate the first negative number in a mixed array.

Quick Quiz

Coding Challenge

Data Pipeline

Write a function called `processOrders` that takes an array of order objects `{item, quantity, price}` and returns the total revenue from orders where quantity is 2 or more. Use method chaining (filter + map + reduce).

Loading editor...

Real-World Usage

Iteration patterns power data processing everywhere:

React rendering: items.map(item => <Card key={item.id} {...item} />) — map is the core of list rendering.
Data analytics: Pandas, SQL, and NoSQL all use filter/map/reduce patterns internally.
Stream processing: Kafka consumers, Node.js streams, and Unix pipes are all iterator pipelines.
Functional programming: Libraries like Lodash, Ramda, and Toolz are built on higher-order iteration.
Async iteration: for await...of iterates over async data sources (API pages, database cursors).

Iteration Patterns