Array Methods in JavaScript

Master map, filter, reduce, and more — transform arrays with live code exercises and visual diagrams.

Category: Programming · v1.0.0

Step 1 of 4

Step 1: map() & filter()

map() transforms every element in an array and returns a new array of the same length. filter() returns a new array containing only elements that pass a test.

map(x => x * 2)

1 2 3 4 5

→ x * 2 →

2 4 6 8 10

filter(x => x > 3)

1 2 3 4 5

→ x > 3? →

4 5

Try it out — run the code, then experiment with your own transformations:

Step 2: reduce()

reduce() processes an array down to a single value. It takes a callback with an accumulator and the current element, plus an initial value.

reduce((acc, x) => acc + x, 0)

Reduce is incredibly versatile. Try summing, finding the max, and counting occurrences:

Step 3: find(), some(), every()

These methods search or test arrays:

find() — returns the first element that passes the test, or undefined
some() — returns true if at least one element passes the test
every() — returns true only if all elements pass the test

find(p => p.age >= 30) on people array

Alice,25 Bob,30 Carol,35

→ age >= 30? → Bob,30

Stops at the first match (Bob) — does not continue to Carol.

Experiment with these methods on an array of people:

About This Lab

JavaScript array methods are essential for modern development. In this lab, you'll learn the most important ones — map, filter, reduce, find, some, every — through interactive code exercises. Each method is explained with visual diagrams showing how data flows through the transformation.

How It Works