Typorithm · easy

map, filter, reduce

array-transformcollectionsmapfilterreduce
Saved on this device
Full lesson · 8 learning steps Open any exercise for focused practice
1

Step 1 of 8 · intro card

Learn map, filter, reduce

0%

Array Methods

map transforms every element into a new array of the same length, filter selects a subset that passes a predicate, and reduce folds the array into a single value using an accumulator and an initial value. All three are immutable — they return new data instead of changing the original array.

map runs a callback over every element and collects the results into a new array of equal length: nums.map((n) => n * 2) doubles each number without touching nums.

filter runs a predicate over every element and keeps only those that return true: nums.filter((n) => n % 2 === 0) returns just the even numbers.

reduce folds the whole array into one value. Its callback takes an accumulator and the current element; the second argument (here 0) is the initial accumulator, so nums.reduce((sum, n) => sum + n, 0) sums the array.

01

map returns a new array of the same length.

02

filter returns a new array of the passing elements.

03

reduce folds into one value via an accumulator + initial.

const nums = [1, 2, 3, 4, 5];
const doubled = nums.map((n) => n * 2);
const evens = nums.filter((n) => n % 2 === 0);
const total = nums.reduce((sum, n) => sum + n, 0);

Read the implementation

Connect each part of the code to the concept before you type.

1. map transforms

map applies the callback to every element and returns a new array of the same length.

const doubled = nums.map((n) => n * 2);

2. filter selects

filter keeps only elements for which the predicate returns true, producing a new shorter array.

const evens = nums.filter((n) => n % 2 === 0);

3. reduce folds

reduce folds the array into a single value, threading an accumulator through each element.

const total = nums.reduce((sum, n) => sum + n, 0);

4. Accumulator + initial

The callback receives the running accumulator and the current element; the trailing 0 is the initial accumulator value.

(sum, n) => sum + n, 0

A complete learning loop

01

Understand

Read the concept map and follow the code breakdown.

02

Reconstruct

Type the implementation, repair mistakes and work through every recall exercise.

03

Verify

Use the final check without hints; revisit weak concepts in short practice sessions.

map, filter, reduce: Lesson & Practice · Typorithm | ApplyDjinn