Lesson 16 of 20

6 mins read

Array Iterators (map, filter, reduce)

In Plain English

Modern JavaScript leverages functional iterator methods (.map, .filter, .reduce, .find, .some, .every) to process collections declaratively without manual for loop counter bookkeeping.

The Mental Model

"Imagine a factory assembly line: .filter() discards defective items, .map() paints the remaining items, and .reduce() packages all painted items into one shipping container."

Deep Dive: How It Works

.map(fn): Creates a brand new array by applying fn to every element.

.filter(fn): Creates a new array containing only elements where fn returned truthy.

.reduce((acc, curr) => ..., init): Condenses an array down into a single accumulated result (sum, object, histogram).

Syntax Blueprint

items.filter(x => x.active).map(x => x.price).reduce((a, b) => a + b, 0)

Chain array methods cleanly for expressive, readable data transformation pipelines.

Core Rules to Remember

.map(): Transforms every item 1-to-1 into a new array.

.filter(): Selects items matching a predicate test.

.reduce(): Accumulates array values into a single summary total or structure.

Common Beginner Traps & How to Fix Them

Mistake:Forgetting the initial value in .reduce().

Why it happens: Without an initial value, reduce takes the first element as the accumulator, which can cause type bugs on empty arrays or object transformations.

How to fix: Always provide an explicit initial value: .reduce((sum, n) => sum + n, 0).

Pro Tip: .map and .filter do not mutate the original array—they return fresh transformed copies.

Live Interactive Example

Hit Run Code to see it live

Functional Data Pipeline

JavaScript ES2024

Output Console

Click "Run Code" to view the rendered output.

How it works: Shows filter, map, and reduce executing in idiomatic modern JavaScript.

Your Turn: Micro Challenge

No pressure! Edit the starter code below and test your solution with instant feedback.

Micro Exercise

Filter and sum numbers with reduce

Given const scores = [10, 20, 30, 40];
Use scores.filter(s => s >= 20) to filter scores >= 20.
Use .reduce((a, b) => a + b, 0) on the filtered list to find the sum (90).
Print "Qualified Total: 90".

Sandbox Output

Click "Run & Check" to test your solution.

Finished reading and practicing?

Mark this lesson as completed to update your course progress.