How to Use map() in JavaScript

What you’ll build or solve

You’ll use map() to apply a function to each element in an array.

When this approach works best

Using map() works best when you:

• Convert values, such as doubling numbers.
• Extract fields from objects.
• Reformat data before rendering.
• Reshape API responses into a new structure.

Avoid map() when you only need side effects like logging or pushing into another array. Use forEach() in that case.

Prerequisites

• A browser console or Node.js
• Basic understanding of arrays and arrow functions

No additional setup is required.

Step-by-step instructions

Step 1: Transform array elements with map()

map() runs a callback function for each element and returns a new array.

Basic transformation:

constnumbers= [1,2,3];

constdoubled=numbers.map(num =>num*2);

console.log(doubled);

The value you return inside the callback becomes the new element.

Step 2: Use the index parameter when needed

The callback receives up to three arguments:

(value, index, array)

You only use what you need.

constitems= ["a","b","c"];

constlabeled=items.map((value,index) => {
return`${index}:${value}`;
});

console.log(labeled);

Step 3: Transform arrays of objects

Extract specific fields:

constusers= [
  { id:1, name:"Alex" },
  { id:2, name:"Sam" }
];

constnames=users.map(user =>user.name);

console.log(names);

Reshape objects:

constsimplified=users.map(user => ({
  userId:user.id,
  username:user.name
}));

console.log(simplified);

What to look for:

• map() returns a new array.
• The original array is unchanged.
• The callback must return a value.
• If you only need side effects, use forEach() instead.
• map() can be chained with other array methods, but it only handles transformation.

Examples you can copy

Example 1: Convert strings to uppercase

constwords= ["apple","banana","orange"];

constupper=words.map(word =>word.toUpperCase());

console.log(upper);

Example 2: Add tax to prices

constprices= [10,20,30];

constwithTax=prices.map(price =>price*1.2);

console.log(withTax);

Example 3: Format names for display

constusers= ["alex","sam","taylor"];

constformatted=users.map(name =>
name.charAt(0).toUpperCase()+name.slice(1)
);

console.log(formatted);

Example 4: Extract nested values

constorders= [
  { id:1, total:50 },
  { id:2, total:75 }
];

consttotals=orders.map(order =>order.total);

console.log(totals);

Common mistakes and how to fix them

Mistake 1: Forgetting to return a value

What you might do:

constnumbers= [1,2,3];

constdoubled=numbers.map(num => {
num*2;
});

Why it breaks:

Using curly braces requires an explicit return. Without it, each element becomes undefined.

Correct approach:

constdoubled=numbers.map(num => {
returnnum*2;
});

Or use implicit return:

constdoubled=numbers.map(num =>num*2);

Mistake 2: Expecting map() to modify the original array

What you might do:

constnumbers= [1,2,3];

numbers.map(num =>num*2);
console.log(numbers);

Why it breaks:

map() does not mutate the array.

Correct approach:

constdoubled=numbers.map(num =>num*2);
console.log(doubled);

Mistake 3: Using map() for side effects only

What you might do:

constnumbers= [1,2,3];

numbers.map(num =>console.log(num));

Why it breaks:

map() is meant to transform values, not just execute code.

Correct approach:

numbers.forEach(num =>console.log(num));

Troubleshooting

• If your result contains undefined, check that your callback returns a value.
• If the original array changes unexpectedly, confirm you are not mutating objects inside the callback.
• If chaining fails, verify that each method returns an array.
• If you see TypeError: ... is not a function, confirm the variable is an array.

Quick recap

• map() transforms every element in an array.
• The callback return value becomes the new element.
• map() returns a new array and does not mutate.
• Always return a value from the callback.
• Use forEach() for side effects.