Map function in JavaScript

In this tutorial, we learn how to use the map function in JavaScript to manipulate arrays.

The map function is one of the most commonly used functions to manipulate array elements. The map() method iterates an array and modifies the array elements using the callback method and returns the new array.

Learn How to use map function in JavaScript

Suppose you have the below array and you want to modify its element and add $10 to each item. If you don’t know the map() function in JavaScript the first thing that comes to your mind is traditional for loop.

Note: map() function in JavaScript didn’t change the original source array.

let arrPrice = [100, 150, 200, 250];
for (let i = 0; i < arrPrice.length; i++){
  arrPrice[i] = arrPrice[i] +  10;
}
console.log(arrPrice); 

Output:

110,160,210,260

This is an old way to achieve the desired result now the new way of doing the same operation with less code using the map() function.

let newarrPrice = arrPrice.map(function(element){
  return element + 10;
});
console.log(newarrPrice);

Output:

110,160,210,260

In the above example, the map() function adds the result items to a new array called “newarrPrice”. In the background whenever the callback method calls it stored the result into a new array.

Map function in JavaScript Parameters

Generally, you only use the element parameter in the callback method but the map() function takes other optional parameters as well  –

Syntax –

array.map(function(current element, index, arr), thisValue)

A function to be run for each element in the array. Below is the definition of each parameter –

Argument	Description
current element	Required. The value of the current array element.
index	Optional. The array index of the current element.
arr	Optional. The array objects to the current element.
thisValue	Optional. thisValue parameter is used like this when executing the callback method.

You can use these parameters as per your requirement and for testing use console.log to check the value of these parameters.

The map() function in JavaScript supports modern es6 syntax to iterate array elements like the arrow function. See below examples –

Map function in JavaScript Examples

Example 1:

Let’s understand how to use the map() function to iterate the array element and return the new array. In this example, we have the below array and just need the item name from this array –

const items =[
{ name : "PS4", price: 200},
{ name : "iPhone" , price: 450},
{ name : "iPod" , price : 80},
{ name : "Watch" , price : 150},
{ name : "MacBook", price : 900 },
{ name : "TV" , price : 600},
{ name : "Keyboard", price : 50 },
{ name : "iPad" , price : 300}
]
const ItemName = items.map((item) => {
return item.name;
})
console.log(ItemName);

Output:

It returns the new array having items name below is the output –

“PS4”, “iPhone”, “iPod”, “Watch”, “MacBook”, “TV”, “Keyboard” , “iPad”

The map() function in JavaScript internally calls a callback method for each item of an array and returns altogether a new array of elements. Here in this example, it creates a new array of item names.

Map() function didn’t work on the empty array and there are many other things you can achieve using the map() function like we you want to find any specific item in the array you can use map() and it returns the true if the item exists otherwise it returns false. Although there are many other popular methods like filter() and find() are used to check the element in array but the map() can also be used.

Example 2:

In the above array suppose if we need to check let say “iPad” exist in the array then you can use below code

const ItemName =  items.map((item) => {
  return item.name == "iPad";
})
console.log(ItemName);

Output –

[false, false, false, false, false, false, false, true]

Here we checked item “iPad” exists in the array so it returns “true” for iPad and false for all other items.

Conclusion

We have learned how to use the map() function in JavaScript to transform the array elements as a developer you must be aware of the map() function so that the array can be iterate with fewer lines of code.