Suggest an edit

Improve this article

Refine the answer for “Array map method”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**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

1. **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; });
   ```

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.

3. **Trying to mutate the original through `map()`.** The method does not touch the source array, so you have to keep the value it returns.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts598 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.