Array map method

JavaScriptJunior~2 min read

The map() method in JavaScript is used to transform an array. It creates a new array by applying a function to every element of the source array, and it does not change the original.

Theory

TL;DR

map() returns a new array with the same length as the source one.
The original array stays untouched, so the method does not mutate your data.
The callback receives three arguments: element, index, array.
Whatever the callback returns becomes the element of the new array.
If the callback returns nothing, the new array holds undefined.
For side effects without a return value, use forEach().

Quick example

javascript

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6, 8]
console.log(numbers); // [1, 2, 3, 4], the source array did not change

Syntax and callback parameters

javascript

const newArray = array.map((element, index, array) => {
  // return a new value
});

Argument	Description
`element`	The current array element
`index`	The index of the current element
`array`	The source array itself

Every callback call has to return something: that value lands in the new array at the same index.

Example 1. Transforming numbers

javascript

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);

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

Each element is multiplied by 2, and the result is a new array.

Example 2. Picking a property out of an array of objects

javascript

const users = [
  { name: 'Tim', age: 25 },
  { name: 'Alex', age: 30 },
  { name: 'Maria', age: 28 }
];

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

console.log(names); // ['Tim', 'Alex', 'Maria']

map() is often used to pull a single field out of an array of objects.

Example 3. Reshaping the data

javascript

const numbers = [1, 2, 3];
const formatted = numbers.map(n => ({ id: n, value: n * 10 }));

console.log(formatted);
// [
//   { id: 1, value: 10 },
//   { id: 2, value: 20 },
//   { id: 3, value: 30 }
// ]

A plain array of numbers becomes an array of objects: the shape of the data changed, the number of elements did not.

When to reach for `map()`

Goal	Is `map()` a fit
Transform data	Yes
Change the source array	No
Run an action with no return value (logging, a request and so on)	No, prefer `forEach()`

A formula worth remembering: arr.map(what_to_do_with_each_element) gives you a_new_array.

Common mistakes

The callback returns nothing. Curly braces turn the arrow function body into a block, so there is no implicit return:

javascript
const arr = [1, 2, 3]; const result = arr.map(num => { num * 2 }); // [undefined, undefined, undefined]

The fix:

javascript
const result = arr.map(num => num * 2); // or const result = arr.map(num => { return num * 2; });
Expecting map() to be about side effects. If you only need to walk the elements and return nothing, use forEach(): otherwise the array built by map() is thrown away and only wastes memory.
Trying to mutate the original through map(). The method does not touch the source array, so you have to keep the value it returns.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.