JavaScript map Method

In the previous lesson, we learned about the array methods JavaScript gives us. Now let’s look closely at map, the method you reach for whenever you want to turn one array into a new array.

🗺️ What is the map Method?

The map method builds a brand new array by transforming each item in the original array. You give map a function, and map calls that function once for every item. Whatever the function returns becomes the matching item in the new array.

The function you pass to map is called a callback, because map calls it back for you on each item. It pairs naturally with arrow functions, which keep the syntax short.

Here is the simplest example, doubling each number:

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

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

console.log(doubled); // [2, 4, 6, 8]

Let’s walk through what each line does:

• const numbers = [1, 2, 3, 4] is the source array we want to transform.
• numbers.map((number) => number * 2) runs the arrow function once per item: number is 1 and returns 2, then number is 2 and returns 4, and so on.
• map collects those returned values into the new array stored in doubled.
• console.log(doubled) prints [2, 4, 6, 8], the doubled values in order.

🔒 map Never Changes the Original

The map method always leaves your original array untouched and hands you a fresh array instead.

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

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

console.log(doubled); // [2, 4, 6, 8]
console.log(numbers); // [1, 2, 3, 4]  → still the same

Let’s compare the two log lines:

• console.log(doubled) shows the new array [2, 4, 6, 8] that map built.
• console.log(numbers) shows [1, 2, 3, 4], proving the original array was not changed.

Because the original stays exactly as it was, map is safe and predictable, which is why it is so popular for working with data.

💵 A Practical Example

In real code you often transform a list into something ready to display. Here we turn an array of price numbers into formatted price strings:

const prices = [9.5, 20, 4.99];

const labels = prices.map((price) => `$${price.toFixed(2)}`);

console.log(labels); // ["$9.50", "$20.00", "$4.99"]

Let’s break down the transformation:

• prices holds plain numbers that aren’t ready to show to a user.
• For each price, the callback returns a template string with a $ and price.toFixed(2), which forces exactly two decimal places.
• labels ends up with the display-ready strings, while prices is left untouched.

The map method is just as common with arrays of objects. Here we pull one property out of each object:

const users = [
  { id: 1, name: "Alex" },
  { id: 2, name: "Sam" },
  { id: 3, name: "Jordan" },
];

const names = users.map((user) => user.name);

console.log(names); // ["Alex", "Sam", "Jordan"]

Let’s trace how the objects become names:

• users is an array of objects, each with an id and a name.
• The callback receives one user at a time and returns just user.name.
• names is a clean array of the name strings, dropping the id and the surrounding object.

🔢 The Callback Receives the Index Too

The callback can take a second value, the index, which tells you the position of the current item. The index starts at 0.

const fruits = ["apple", "banana", "cherry"];

const numbered = fruits.map((fruit, index) => `${index + 1}. ${fruit}`);

console.log(numbered); // ["1. apple", "2. banana", "3. cherry"]

Let’s see how the index shapes the result:

• The callback now takes two parameters: fruit is the current item and index is its position.
• index is 0, 1, and 2 across the three passes, so we add 1 to make the list read 1, 2, 3 instead of starting at zero.
• The template string combines the number and the fruit, giving numbered the labeled strings.

You only need to name the index parameter when you actually use it.

⚠️ Common Mistakes to Avoid

The first mistake is the most common one. When you write a callback with curly braces, you must add the return keyword yourself:

const numbers = [1, 2, 3];

// ❌ Curly braces with no return → [undefined, undefined, undefined]
const wrong = numbers.map((number) => {
  number * 2;
});

// ✅ Add return, or skip the braces so the value returns automatically
const right = numbers.map((number) => {
  return number * 2;
});

console.log(wrong); // [undefined, undefined, undefined]
console.log(right); // [2, 4, 6]

Let’s see what differs between the two callbacks:

• In the ❌ wrong version, the curly braces make a function body, and number * 2 is computed but never returned. With no return, the callback hands back undefined each time, so wrong is [undefined, undefined, undefined].
• In the ✅ right version, the explicit return number * 2 sends the value back, so right is [2, 4, 6].
• The fix is to add return whenever you use curly braces, or drop the braces so the arrow function returns the value automatically.

🔧 Try It Yourself!

🧩 What You’ve Learned

• ✅ map builds a new array by transforming each item
• ✅ The callback returns the new value for each item
• ✅ map never changes the original array
• ✅ The new array always has the same length as the original
• ✅ The callback can also receive the index of each item
• ✅ Forgetting to return from the callback gives an array of undefined

🚀 What’s Next?

Now that you can transform an array, let’s learn how to keep only the items you want. Let’s continue to filter.