The Array.prototype.map() method was introduced in ES6 (ECMAScript 2015) for iterating and manipulating elements of an array in one go. This method creates a new array by executing the given function for each element in the array.

The Array.map() method accepts a callback function as a parameter that you want to invoke for each item in the array. This function must return a value after performing all the modifications.

The callback accepts up to three operational parameters. The first is the current item in the iteration, the second is the index of the current item in the array, and the third is the array itself.

Let us look at the following example:

const prices = [45, 9.99, 33, 50];

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

console.log(updatedPrices); 

// ['$45', '$9.99', '$33', '$50']

As you can see above, we used the map() function to iterate over an array of numbers and convert its elements to strings by prepending a currency symbol. The updatedPrices variable is a newly created array with the results of executing a function for each item in the parent array.

Keep in mind that the Array.map() is non-mutating function, which means that it doesn't change the original array and only relies on the results of the provided function to create a new array.

The range of elements processed by the map() function is decided before the first invocation. If new items are added to the array after the map() begins, they won't be processed by the callback.

Examples

In addition to iterating over all elements of an array and transforming them, the map() method can be used to do more things. Let us look at a few more examples below.

Extracting values from an array of objects

The map() method is extremely useful to extract values from an array of objects. Let us say you have the following JSON array that contains users' names and their ages:

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

Here is an example that uses map() to extract all ages and returns them as a new array:

const ages = users.map(user => user.age);

console.log(ages);

// [35, 24, 42]

Transforming array of objects

The map() method can be used to iterate over all objects in an array, transform the content of each individual object, and return a new array. Here is an example:

const modifiedUsers = users.map(user => {

    // assign a random color to each user
    user.color = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);

    // return 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

The Array.map() method in JavaScript is used to iterate over all elements of an array and creates a new array. Here are a few things that you should remember about Array.map():

  • It calls the provided function for each element in an array and returns a new array.
  • It doesn't modify the original array contents and only creates a new array with the values returned by the invoked function.
  • New elements added to the array after the map() function begins are not processed.

The Array.map() method works in all modern browsers, and Internet Explorer 9 and above. You can use a polyfill to support IE6 and higher.

Take a look at this article to learn more about JavaScript arrays and their methods.

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also Subscribe to RSS Feed.

Last Updated: