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

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 array of items using array.map() method
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
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

Summary
Review Date
Reviewed Item
JavaScript Understanding array.map() Function for Beginners
Author Rating
51star1star1star1star1star
Software Name
Javascript Programming
Software Name
Windows Os, Mac Os, Ubuntu Os
Software Category
Web Development