The JavaScript array.map() method

Q: What is the difference between map() and forEach()?

map() returns a new array of transformed values; forEach() returns undefined and is for running side effects. Use map() when you want the result, forEach() when you don't.

Method JavaScript All modern browsers Updated June 23, 2026

Quick answer

JavaScript's map() method builds a brand-new array by running a function on every element of the original and collecting what each call returns. [1, 2, 3].map(n => n * 2) gives [2, 4, 6]. It never changes the original array, which is exactly why it's the go-to tool for turning one list of data into another.

Overview

map() takes an array, runs your function once for each element, and hands back a new array of the return values. If you have five prices and want them all with tax added, or a list of user objects and you only want their names, map() is the method you reach for. The original array is left completely untouched.

The function you pass — the callback — receives up to three arguments: the current element, its index, and the whole array. Most of the time you only need the first one, but the index is handy for things like numbering items. Whatever your callback returns becomes the matching element in the new array, so the result always has the same length as the input.

The classic mistake is using map() when you don't actually want a new array — if you're just looping to do something with each item and ignoring the result, forEach() says what you mean more clearly. And if you forget to return inside the callback, every element comes back as undefined. Reach for map() when the whole point is the transformed array.

Syntax

const newArray = array.map(callbackFn)
const newArray = array.map(callbackFn, thisArg)

// the callback can use the element, its index, and the array
array.map((element, index, array) => {
  return /* the new value for this position */;
})

Parameters

The array.map() method accepts the following parameters.

Parameter	Description
`callbackFn`	Function run for each element. Receives `(element, index, array)` and its return value fills that slot in the new array.
`thisArg`	Optional. A value to use as `this` inside the callback. Rarely needed with arrow functions.

Examples

Live example

<pre id="out" style="font:15px ui-monospace,monospace"></pre>
<script>
  const prices = [10, 25, 40];

  // add 20% tax to every price
  const withTax = prices.map(p => p * 1.2);

  document.getElementById('out').textContent =
    'original: ' + prices.join(', ') + '\n' +
    'with tax: ' + withTax.join(', ');
</script>

Example #2

Live example

<pre id="out" style="font:15px ui-monospace,monospace"></pre>
<script>
  const users = [
    { name: 'Ada',  age: 36 },
    { name: 'Linus', age: 24 }
  ];

  // pull just the names into a new array
  const names = users.map(user => user.name);

  document.getElementById('out').textContent = names.join(', '); // Ada, Linus
</script>

Best practices

Always return a value from the callback — forget it and every element comes back as undefined.
Use map() only when you want the resulting array. If you're just looping for side effects, use forEach() instead.
Keep the callback pure — transform the element and return it, rather than mutating outside variables.
Chain it with filter() and reduce() to express data pipelines in a readable, left-to-right way.

Frequently asked questions

What does map() do in JavaScript?

It creates a new array by calling a function on each element of the original and using the return values. The original array is not changed.

What is the difference between map() and forEach()?

map() returns a new array of transformed values; forEach() returns undefined and is for running side effects. Use map() when you want the result, forEach() when you don't.

Does map() change the original array?

No. It leaves the original untouched and gives you a new array. (If your callback mutates the objects inside the array, those changes are visible, but the array structure itself is not altered.)

How do I get the index in map()?

The callback's second argument is the index: arr.map((item, i) => `${i}: ${item}`).

array.join() array.pop()

References