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:

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 of objects. Suppose you have the following JSON array containing users' names and ages:

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:

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:

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 can be used. To learn more about JavaScript arrays and their methods, you can refer to this article.

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