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:

const numbers = [1, 2, 3];

const doubled = 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.

const items = ["a", "b", "c"];

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

console.log(labeled);

Step 3: Transform arrays of objects

Extract specific fields:

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

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

console.log(names);

Reshape objects:

const simplified = 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

const words = ["apple", "banana", "orange"];

const upper = words.map(word => word.toUpperCase());

console.log(upper);

Example 2: Add tax to prices

const prices = [10, 20, 30];

const withTax = prices.map(price => price * 1.2);

console.log(withTax);

Example 3: Format names for display

const users = ["alex", "sam", "taylor"];

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

console.log(formatted);

Example 4: Extract nested values

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

const totals = 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:

const numbers = [1, 2, 3];

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

Why it breaks:

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

Correct approach:

const doubled = numbers.map(num => {
  return num * 2;
});

Or use implicit return:

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

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

What you might do:

const numbers = [1, 2, 3];

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

Why it breaks:

map() does not mutate the array.

Correct approach:

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

Mistake 3: Using map() for side effects only

What you might do:

const numbers = [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.