JavaScript Understanding array.map() Function for Beginners
JavaScript provides a vast number of built-in function which can fit in more of use cases. In this post, we’ll learn about JavaScript Array Map() function and take a look at its real-world application.
JavaScript Array Map() function works on arrays it is a prototype method in the array. It just calls a function on each item of the array and using the return value we can create a new array or update the existing one.
Syntax
array.map( (item, index, array) => {
//statements
} );
The item is the current item of an array. The index is the key or array index number and array defines the current array.
index and array are optional parameters.
Table of Contents
- Iterating over Arrays
- Iterating over objects inside Array
- Calling Function for each iteration
- Conclusion
Iterating over Arrays
let student_names = ["Pavan", "Ravi", "Naresh"];
student_names.map((item, index, array) => {
console.log(`Current Item : ${item} | index : ${index} | array : `,array);
});
//Console Output
Current Item : Pavan | index : 0 | array : (3) ["Pavan", "Ravi", "Naresh"]
Current Item : Ravi | index : 1 | array : (3) ["Pavan", "Ravi", "Naresh"]
Current Item : Naresh | index : 2 | array : (3) ["Pavan", "Ravi", "Naresh"]
Iterating over an array of items using array.map() method
Array student_names contains the names of students and while iterating over map() function of the key item return the value of the current item. The index the returns index number for the current item and array return the complete student_names array.
Iterating over objects inside Array
let students_information = [
{"name" : "Kunal", "total_marks" : 375},
{"name" : "Suma", "total_marks" : 405},
{"name" : "Naresh", "total_marks" : 453},
{"name" : "Praveen", "total_marks" : 441},
];
students_information.map((student, index, array) => {
let obj = student;
let percentage = 0;
if(student["total_marks"]>0){
percentage = parseFloat(((student["total_marks"]/600)*100).toFixed(2));
}
obj["percentage"] = percentage;
return obj;
});
console.log(students_information);
//Console Output
(4) [{…}, {…}, {…}, {…}]
0: {name: "Kunal", total_marks: 375, percentage: 62.5}
1: {name: "Suma", total_marks: 405, percentage: 67.5}
2: {name: "Naresh", total_marks: 453, percentage: 75.5}
3: {name: "Praveen", total_marks: 441, percentage: 73.5}
length: 4
__proto__: Array(0)
Iterate over student objects and calculate the percentage secured
The Array.map() function can also be used to create a new array with existing or updating new values or can update information inside an existing array.
In the above example, the array students_information contains multiple objects which have student details such as name and total_marks. Now we want to find the percentage total_marks secured by each student.
For this, we call the array map() function and inside the function, we calculate each student percentage and return the object obj. Object obj contains current student information with percentage. Returning the object will update the student object and when we console.log(students_information). we can see that array students_information has been updated.
Calling Function for each iteration
function calculatePercentage(student, index, array){
let obj = student;
let percentage = 0;
if(student["total_marks"]>0){
percentage = parseFloat(((student["total_marks"]/600)*100).toFixed(2));
}
obj["percentage"] = percentage;
return obj;
}
let students_information = [
{"name" : "Kunal", "total_marks" : 375},
{"name" : "Suma", "total_marks" : 405},
{"name" : "Naresh", "total_marks" : 453},
{"name" : "Praveen", "total_marks" : 441},
];
students_information.map(calculatePercentage);
console.log(students_information);
//Console Output
(4) [{…}, {…}, {…}, {…}]
0: {name: "Kunal", total_marks: 375, percentage: 62.5}
1: {name: "Suma", total_marks: 405, percentage: 67.5}
2: {name: "Naresh", total_marks: 453, percentage: 75.5}
3: {name: "Praveen", total_marks: 441, percentage: 73.5}
length: 4
__proto__: Array(0)
Using function calculatePercentage() as callback for Javascript array.map() method
The second parameter of array.map() function expects function so we can also pass anonymous or pass defined function in this case it is calculatePercentage. The function calculatePercentage takes three arguments and returns obj with percentage.
Conclusion
We have come to the end of our post on JavaScript Understanding array.map() Function for Beginners.If you like our content then please do share it and comment to clarify your doubts.
Related Posts
- An Overview of Javascript Object.seal() Method for Beginners
- Learn Javascript Object.is() method for Beginners
