Arrays, filter & map

Find the right items

Lesson 8 of 20 · 9 min · Module 3: Collections & meaningful data

Arrays organize many related values. Often you want to select a few items and turn them into a different shape.

Free. No installation: you write and run the code in your browser, and it is checked automatically.

By the end, you’ll be able to…

Choose between filtering and transforming
Read arrow function callbacks
Chain operations in a clear order

The idea

filter() keeps items for which a callback returns true. map() transforms every remaining item. Both return a new array.

const scores = [35, 80, 92];
const passing = scores.filter(score => score >= 50);
console.log(passing.map(score => score + " points"));

01One method, one responsibility

Filtering answers “which items belong?” Mapping answers “what should each item become?” Separating those questions makes code easier to test and explain.

02Follow the values through the chain

After filter, you still have complete user objects. After map, you have strings. Reading each intermediate shape helps you choose which properties are available next.

Your turn

Write activeNames(users) to return the names of users whose active property is true. Keep their original order and leave the input array unchanged.

What the checks look for

Selects active users in order
Handles no active users
Handles an empty array
Works with a frozen input array

Try it in the editor →

Take this with you

Filter to select; map to transform.