JavaScript Simplified · One concept, one day, one project · Day 23 of 32

Array Methods: map()

Transforming every item in a list at once, cleanly. You convert a list of prices into a formatted price list.

By the end of today you can

Use map to transform a whole array
Pass an arrow function to an array method
See why map returns a new array and leaves the original alone
Build a price converter

You often need to turn a list into another list: prices into formatted prices, names into greetings, numbers into doubled numbers. You could write a loop every time. map does it in one clear line, and it is where arrow functions earn their keep.

1. What map Does

Definition

map goes through an array, runs a function on each item, and returns a new array of the results. The original array is untouched. You give map an arrow function that says how to transform one item.

What this code doesmap runs (n) => n * 2 on every item and collects the results into a new array. The original numbers is left exactly as it was.

app.js

const numbers = [1, 2, 3, 4];

// for each number n, give back n * 2
const doubled = numbers.map((n) => n * 2);

console.log(doubled);
console.log(numbers); // unchanged

OUTPUT   TERMINAL

➜ webbo3 node app.js
[ 2, 4, 6, 8 ]
[ 1, 2, 3, 4 ]

2. map with Strings and Objects

The transform can be anything: build a sentence, read a property off each object, format a value.

What this code doesEach name becomes a greeting. map is perfect whenever you need "the same change, applied to every item".

app.js

const names = ["ada", "bayo", "chi"];

// capitalise each name
const greetings = names.map((name) => "Hello, " + name + "!");
console.log(greetings);

OUTPUT   TERMINAL

➜ webbo3 node app.js
[ 'Hello, ada!', 'Hello, bayo!', 'Hello, chi!' ]

A loop versus map

Everything map does, a for loop can do. But map says its intention in one line: "transform every item into this". Less code, fewer places for a bug, and a reader sees at a glance what you meant.

Today’s Mini Project

💵 Price Converter

Take a list of plain prices and produce a list of formatted price strings, like "N1,500". One map, one arrow function, a whole list converted.

What this code doestoLocaleString() adds the thousands commas. map applies the formatting to every price at once, giving a new list ready to show on a page.

app.js

const prices = [1500, 7500, 200, 48000];

// turn each number into a formatted price string
const formatted = prices.map((price) => "N" + price.toLocaleString());

console.log(formatted);

OUTPUT   TERMINAL

➜ webbo3 node app.js
[ 'N1,500', 'N7,500', 'N200', 'N48,000' ]

Challenge (15 minutes)

Use map to apply a 10% discount to every price, giving a new array of discounted numbers. Expected: each price reduced by 10%, the original list unchanged.

Try This

Given [5, 10, 15], use map to get [25, 100, 225] (each number squared).

Expected: a new array of the squares, in one line.

Picture This

A loop that builds a new list is so common that JavaScript gave it a name: map. From now on, "turn this list into that list" is one readable line, not ten. This is the modern way data gets reshaped.

Checkpoint

What does map return?

A new array containing the result of running your function on each item. The original array is not changed.

What do you pass to map?

A function (usually an arrow function) that takes one item and returns its transformed version. map calls it for every item.

When is map a better choice than a for loop?

When you are transforming every item into a new item. map says that intention in one line, with less room for error.

Tick Before You Move On

☐ I can transform an array with map
☐ I can pass an arrow function to map
☐ I know map returns a new array and leaves the original alone
☐ I built the Price Converter

Quick Recap

map transforms every item in an array and returns a new array. You give map an arrow function describing how to change one item. The original array is never changed. map replaces the "loop to build a new list" pattern with one clear line.

Next: Day 24. map changes every item. But often you want only some items, or just one. Tomorrow you learn filter and find.

Array Methods: map()

1. What map Does

Definition

2. map with Strings and Objects

Today’s Mini Project

Checkpoint

Learn this with a real instructor