Array Methods in JavaScript

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

Programming v1.0.0 164 uses

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)

acc = 0 + 1 → 1

acc = 1 + 2 → 3

acc = 3 + 3 → 6

acc = 6 + 4 → 10

acc = 10 + 5 → 15

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

1 Read each step's explanation of the array method
2 Study the visual diagram of data flow
3 Write and run code in the editor
4 Experiment with different transformations
5 Complete the quiz to test your knowledge

X Facebook LinkedIn Reddit WhatsApp Telegram Pinterest Email

More Labs in Programming

JavaScript Variables & Types

Programming

Explore JavaScript variables, data types, and type coercion through interactive code exercises.

Git Fundamentals

Programming

Learn the core Git workflow — staging, committing, branching, and merging through an interactive terminal simulator.

Python Basics

Programming

Write your first Python code — learn variables, data types, conditionals, and loops interactively.

Array Methods in JavaScript

Step 1: map() & filter()

Step 2: reduce()

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

Step 4: Knowledge Check

About This Lab

How It Works

More Labs in Programming

JavaScript Variables & Types

Git Fundamentals

Python Basics