What is the map() method?
The JavaScript array’s map method creates a new array by calling a call-back function(passing a function to another function as an argument) on each and every element without changing the original array.
The Syntax of the array map method is shown below:
As we can see from the above syntax, the map() method takes two parameters. The first is function(currentValue,index,arr) which is a callback function and is a compulsory parameter. This call-back function takes three arguments. The first is the currentValue referring to the current value of the element and it is a compulsory parameter. The second parameter is the index which has the index of the current element and the third is the arr which refers to the array. The index and arr parameters are optional. The next parameter in the map() method is thisValue which refers to the value that is passed to the function and thisValue parameter is optional.
Iterating over an array using the map method
Now that we know what an array map method is, let us see how to iterate over an array using the map method.
var newArr = myArr.map(function(element){
// multiply myArr with 2
//returns a new array
return element *2;
});
console.log(newArr); // [2,4,6,8]
In the above code, first, we initiated an array with the name of myArr and then called map() method on this array initiating a call back function. In the call back function, we multiplied each and every element of the myArr to 2. We then saved the new array to the newArr variable and then console log the new array whose output is shown below:
Let us see some other examples of the map() method in JavaScript.
Rounding array elements
In this example, we will see how we can round array elements to the nearest integer.
var output=myArr.map(e=>Math.round(e));
console.log(output); // 2,4,4
We first initiated an array with the name of myArr and then initiated the map method on this array by rounding off every element of the myArr and then the output of this operation is saved in the variable output.
Finding Square root
Let’s find the square root of all the elements of an array for which it is mostly the same as the above example. First, we will initiate an array and then run the map method on it, storing the result in the output.
var output=myArr.map(e=>Math.sqrt(e));
console.log(output); // 2,3,4
Adding String to the array elements
In this example, we will add the string 1 dozen with every element of the array. For example:
var output= myArr.map(e=>"1 dozen "+e);
console.log(output);
We can see in the output that every element of the array now has 1 dozen in the new array that is console logged.
Getting Full name from an array of objects
Let us see a little complex example where we will initiate an array of objects that will contain the first name and last name of a person. We will then execute the map() method on this array and then in the call back function we will concatenate the firstName and lastName to get a fullName of the person.
{firstname : "John", lastname: "Reynolds"},
{firstname : "Smith", lastname: "Jhonson"},
{firstname : "Sarah", lastname: "Frye"}
];
function getFullName(item) {
return [item.firstname,item.lastname].join(" ");
}
const output= persons.map(getFullName);
console.log(output);
Conclusion
To store data JavaScript gives us various data types such as an array. An array has inbuilt methods that make us easily manage our code and write less code. One such method of the array is the map() method. The array map() method executes a call-back function on each and every element of the array and returns a new array.
In this post, we saw how to map an array in JavaScript and what a map method is in JavaScript. Apart from that, we iterated over an array using the map() method and then provided a few examples using the map() method of the array to transform elements of the initiated array according to the provided call-back function.
