JavaScript Array map() Method

What You’ll Learn

The map() method transforms every element with a callback and returns a new array of the same length. This tutorial covers syntax, five examples, comparison with forEach(), object extraction, type conversion, and when to reach for flatMap() instead.

Introduction

When you need to convert each item in a list—squaring numbers, pulling names from objects, or formatting strings—map() is the standard tool. You describe the transformation once; JavaScript applies it to every element and hands you a fresh array.

Unlike a manual for loop with push, map() expresses intent clearly: “give me a new array where each value is the result of this function.”

Understanding the map() Method

array.map(callback, thisArg?) invokes callback(element, index, array) for each index that exists. Whatever the callback returns becomes the value at that position in the new array.

The output array always has the same length as the source (unless you are working with sparse arrays with holes—holes stay holes). The original array is never replaced or reordered by map() itself.

📝 Syntax

General form of Array.prototype.map:

const newArray = array.map(callback(element, index, array), thisArg)

Parameters

• callback — function run for each element; its return value is stored in the new array.
• thisArg — optional; value of this inside the callback (rarely needed with arrow functions).

Callback arguments

• element — current item being processed.
• index — position (0-based).
• array — the array map() was called on.

Return value

• A new array with transformed values.
• Original array unchanged.

Common patterns

• arr.map((x) => x * 2) — numeric transform.
• users.map((u) => u.name) — pluck a property.
• strings.map(Number) — pass a built-in function.
• arr.map((v, i) => i + ": " + v) — use index.

Examples Gallery

Open DevTools Console (F12) or use Try-it labs. Example N maps to ?tryit=N.

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

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

console.log(squared);
// [1, 4, 9, 16, 25]

console.log(numbers);
// [1, 2, 3, 4, 5] — unchanged

[1, 4, 9, 16, 25]
[1, 2, 3, 4, 5]

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" }
];

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

console.log(names);
// ["Alice", "Bob", "Charlie"]

["Alice", "Bob", "Charlie"]

const stringNumbers = ["1", "2", "3"];

const integers = stringNumbers.map(Number);

console.log(integers);
// [1, 2, 3]

console.log(typeof integers[0]);
// "number"

[1, 2, 3]
number

const nums = [1, 2, 3];

const fromMap = nums.map((n) => n * 10);
const fromForEach = nums.forEach((n) => n * 10);

console.log("map:", fromMap);
// [10, 20, 30]

console.log("forEach:", fromForEach);
// undefined

map: [10, 20, 30]
forEach: undefined

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

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

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

["1. apple", "2. banana", "3. cherry"]

🚀 Common Use Cases

• Math on numbers — scale, round, or format values.
• Pluck fields — extract ids, names, or prices from objects.
• Parse input — convert strings to numbers or dates.
• Render lists — build HTML strings or React elements (in UI code).
• Normalize data — map API rows to a consistent shape.
• Chain transforms — .map(fn).filter(fn) pipelines.

📝 Notes

• Always returns a new array (same length as source for dense arrays).
• Callback must return a value; missing returns become undefined.
• Does not mutate the original array structure.
• For side effects only, prefer forEach().
• If callback returns nested arrays you want flattened, use flatMap().
• Async callbacks are not awaited—use Promise.all(arr.map(async ...)) for parallel async work.
• ES5—excellent support including IE9+.

💡 Best Practices