Phenquestions
The array's map method is used to construct a new mapped array based on the return value of the callback function for each element.
var mappedArray = array.map(callbackFunction, thisValue)The callback is the function that will be called every time for a single element and return a value that will be stored in a new array. The syntax for the callback function is
function(value, [index[, array]])value is a necessary argument, which is actually a single element of the array.
The index is an optional argument that will be used as the index of each element in the callback function.
The array is an optional argument as well. We can pass this argument if we want to use the array in the callback function.
thisValue is the value we want to pass, which will be used as a “this” in the callback function. Otherwise, “undefined” will be passed.
Javascript provides the for… in loop and foreach loop for iterating through elements and manipulating arrays. But, why do we need a map method aside from that? There are two major reasons for that. One is the separation of concern and the second is the easy syntax for doing such tasks. So, let's try some different examples to demonstrate the purpose and right use of it.
Examples
First of all, we are going to have a simple demonstration in which we have a simple array of numbers on which we will try to perform any simple arithmetic operation over every single element.
var arr = [4, 8, 16, 64, 49];Now, before applying the map method over this array. We will first write a callback function to which we can call in our map function in which, let's say we want to multiply each element with 10 and have a new array.
function multiply(element)var newElement = element * 10;
return newElement;
Everything is set up to apply the map method over the array and have the results required.
var newArr = arr.map(multiply);Now, if we have a look at the “newArr”,
console.log(newArr);We can see the latest mapped array in the output as per our requirement.
Keep this in mind that the length of the new mapped array will definitely be equal to the original array.
There is a shorter way of doing the same task using the arrow or anonymous function within a map method. So, we can write a callback function within a map method like this
var newArr = arr.map((element) =>return element * 10
)
Or, if we want to be a pro and make it more concise. We can do this
var newArr = arr.map(e => e * 10)Alright! So, this was the very basic demonstration of the map method and different ways to write the call back function. But, this function comes more in handy, when we are playing with an array of objects. That's where it's true implementation happens.
Using Map with an Array of objects
In this example, we suppose an array of objects in which each object contains the information of a player. Player's name and his ID.
var arr = [id: 12, name: "James",
id: 36, name: "Morgan",
id: 66, name: "Jordan"
];
Now, let's say we want to extract the IDs from each object and have a new array of IDs.
But, in order to understand, how the map method is different and helps better than the foreach loop. We will try both of these(map method and foreach loop) to do the same task and learn the difference.
So, first, we will try to extract IDs using the foreach loop and then using the map method.
var extractedIDs = [];arr.forEach((element) =>
return extractedIDs.push(element.id);
)
Now, if we have a look at the extracted IDs.
console.log(extractedIDs);
We have got them separated in an array. But, now let's demonstrate the same output using the map method.
return element.id;
)
console.log(extractedIDs);
By looking at the difference in code and the same output, we can realize the true difference between the two(foreach and map) methods. The syntax and separation of concern.
Similarly, we can perform a lot of other operations. If we have to play and get some data from the array of objects. We suppose an array of objects in which each object contains two properties: first name and last name.
var arr = [firstName: "John", lastName: "Doe",
firstName: "Morgan", lastName: "Freeman",
firstName: "Jordan", lastName: "Peterson"
];
Now, we want to have an array that contains the full names. So, we will write a map function like this to fulfill our purpose
var fullName = arr.map((person) =>return person.firstName + " + person.lastName
)
console.log(fullName);
As you can see, we have got a separate array with full names. That's great.
So, these are some of the basic and different ways of how a map function can be used to fulfill our development requirements and helps in every javascript developer's life.
Conclusion
In this article, we have learned about javascript's most used map() method for arrays and we have learned some of the different ways to use the map method. This article explains the concept of the map method in such an easy and profound way that any beginner coder can understand it and utilize it to his needs. So, keep on learning, working, and getting experience in javascript with linuxhint.com to have a better grasp over it. Thank you so much!
