JavaScript - 15

JavaScript - 15: Advanced Array Methods (.map() and .filter())

JavaScript arrays have methods that can create new arrays by transforming or selecting items.

In this lesson, you will use .map() to change every number and .filter() to keep only the numbers that pass a condition.

Your challenge: Start with an array of numbers, create a new array where every number is doubled, then create another array containing only values greater than 10.

What does .map() do?

The .map() method goes through every item in an array, transforms each one, and builds a new array from the results.

For example: numbers.map((number) => number * 2)

If the original array is: [5, 12, 8]

the new array becomes: [10, 24, 16]

Each original number was multiplied by 2.

.map() returns a new array

This is an important difference from methods such as .push() and .shift().

Those methods change the existing array.

.map() creates and returns a new one.

That means you can write:

const doubled = numbers.map((number) => number * 2);

Now doubled contains the transformed values while numbers still contains the original values.

What happens during .map()?

With: [5, 12, 8, 20, 3, 15]

JavaScript visits each value one at a time.

It effectively performs:

5 * 2 → 10
12 * 2 → 24
8 * 2 → 16
20 * 2 → 40
3 * 2 → 6
15 * 2 → 30

Those returned values become the new array.

What does .filter() do?

The .filter() method also visits every item, but instead of transforming the values, it decides which ones should be kept.

For example: numbers.filter((number) => number > 10)

The condition: number > 10

produces either true or false for each number.

If the result is true, that number is included in the new array.

If the result is false, that number is left out.

Which numbers pass the filter?

For the starting array: [5, 12, 8, 20, 3, 15]

JavaScript checks:

5 > 10 → false
12 > 10 → true
8 > 10 → false
20 > 10 → true
3 > 10 → false
15 > 10 → true

The filtered array becomes: [12, 20, 15]

.map() vs. .filter()

A simple way to remember the difference is:

.map(): transform every item.
.filter(): choose which items to keep.

If the original array contains six items, .map() normally creates another array with six items.

A .filter() result may contain fewer items because some values might not pass the condition.

What is the arrow function doing?

You have already seen arrow functions with .forEach().

In: number => number * 2

number represents the current array item.

The expression after => is the value returned for that item.

So: number => number * 2

means: "Take this number and return twice its value."

Short arrow functions return automatically

This: number => number * 2

is a shorter version of:

number => { return number * 2; }

When an arrow function contains one expression without curly braces, that expression is returned automatically.

Print the original array too

Try printing all three arrays:

console.log("Original:", numbers);
console.log("Doubled:", doubled);
console.log("Greater than 10:", greaterThan10);

Notice that the original array still contains: [5, 12, 8, 20, 3, 15]

Neither .map() nor .filter() changed it.

Experiment with .map()

Instead of doubling the numbers, try tripling them:

const tripled = numbers.map((number) => number * 3);

Or add 10 to every value:

const increased = numbers.map((number) => number + 10);

Experiment with .filter()

Try keeping only numbers smaller than 10:

const smallNumbers = numbers.filter((number) => number < 10);

Then try keeping numbers greater than or equal to 15:

const largeNumbers = numbers.filter((number) => number >= 15);

You can filter transformed data too

Because .map() returns an array, you can use another array method on its result.

For example:

const doubled = numbers.map((number) => number * 2);

Then:

const bigDoubledNumbers = doubled.filter((number) => number > 20);

This first creates doubled values and then keeps only the ones greater than 20.

Extra challenge: Create an array called prices containing [4, 12, 7, 18].

Use .map() to create a new array where each price has 2 added to it. Then use .filter() on the original array to keep only prices of 10 or more.

Good JavaScript habit: Use .map() when you want a transformed version of an array and .filter() when you want a new array containing only the items that match a condition.

const numbers = [5, 12, 8, 20, 3, 15];

const doubled = numbers.map((number) => number * 2);

const greaterThan10 = numbers.filter((number) => number > 10);

console.log("Original:", numbers);
console.log("Doubled:", doubled);
console.log("Greater than 10:", greaterThan10);