# How to use Array.map() method in JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published May 9, 2020, updated Jun 7, 2023. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-array-map

> A quick introduction to Array.map() method in JavaScript and how to use it to iterate over all elements of an array.

Introduced in ES6 (ECMAScript 2015), the `Array.prototype.map()` method allows for both iterating through and manipulating elements of an array in a single operation. By executing the given function for each element of the array, this method creates a new array.

To use `Array.map()`, you pass a callback function as a parameter to be invoked for each item in the array. This function must return a value after performing any desired modifications.

The callback function can take up to three operational parameters: the current item in the iteration, the index of the current item in the array, and the array itself.

Consider the following example:

```javascript
const prices = [45, 9.99, 33, 50]

const updatedPrices = prices.map(price => '$' + price)

console.log(updatedPrices)
// ['$45', '$9.99', '$33', '$50']
```

In the above example, the `map()` function is used to iterate over an array of numbers and convert its elements to strings by prepending a currency symbol. The `updatedPrices` variable stores the newly created array with the results of executing the function for each item in the original array.

It's important to note that `Array.map()` is a **non-mutating** function, meaning it does not alter the original array and solely relies on the provided function's results to generate a new array.

The range of elements processed by the `map()` function is determined prior to the first invocation. Therefore, if new items are added to the array after `map()` has started, they will not be processed by the callback function.

## Examples

Aside from iterating over array elements and transforming them, the `map()` method has various other applications. Let's explore a few more examples:

### Extracting values from an array of objects

The `map()` method proves extremely useful for extracting values from an [array](https://attacomsian.com/blog/javascript-arrays) of objects. Suppose you have the following JSON array containing users' names and ages:

```javascript
const users = [
    {
        name: 'John Deo',
        age: 35
    },
    {
        name: 'Emma Kel',
        age: 24
    },
    {
        name: 'Kristy Adam',
        age: 42
    }
]
```

Here's an example that utilizes `Array.map()` to extract all ages and returns them as a new array:

```javascript
const ages = users.map(user => user.age)

console.log(ages)
// [35, 24, 42]
```

### Transforming an array of objects

The `map()` method can be employed to iterate over all objects in an array, modify the contents of each individual object, and return a new array. Consider the following example:

```javascript
const modifiedUsers = users.map(user => {
  // Assign a random color to each user
  user.color = '#' + ((Math.random() * 0xffffff) << 0).toString(16)

  // Return the modified user
  return user
})

console.log(modifiedUsers)

// [
//   { name: 'John Deo', age: 35, color: '#f76f4b' },
//   { name: 'Emma Kel', age: 24, color: '#e05341' },
//   { name: 'Kristy Adam', age: 42, color: '#48242c' }
// ]
```

## Conclusion

In JavaScript, the `Array.map()` method is utilized to iterate over all elements of an array and create a new array. Here are a few key points to remember about `Array.map()`:

1. It calls the provided function for each element in an array and returns a new array.
2. It does not modify the original array but rather creates a new array solely based on the values returned by the invoked function.
3. Any elements added to the array after the `map()` function begins will not be processed.

The `Array.map()` method is supported in all modern browsers and Internet Explorer 9 and above. For IE6 and higher versions, a [polyfill](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Polyfill) can be used. To learn more about JavaScript arrays and their methods, you can refer to [this article](https://attacomsian.com/blog/javascript-arrays).