Updated April 12, 2023
Introduction to JavaScript Array map()
Map() is one of the utilities present in the JavaScript libraries to build an array by calling out a given operation to be performed on every element on the existing array. The method is called for every element of the array and the result of the operation is mapped to the corresponding index in the new array. Map() does not execute for the arrays that consist of no elements. The result is a new array with the same length where the existing elements being undisturbed thus also called non-mutating.
Syntax of JavaScript Array map():
array.map(method(args),thisValue)Parameters of above syntax:
1. Method: This is the required parameter of this method of Map() function as it constitutes the call to the operation need to be performed on every element of the array to create the new array.
This method will pass below variables as arguments to call the function:
- currentValue: The current value of the array one by one is sent as arguments to call the method. This is one of the important argument of the method.
- index: The index of the current element is optional to be sent as argument.
- array: This refers to the reference variable to the array.
2. thisVal: This is also an optional parameter that is used to store the reference to the value being passed as parameter.
How JavaScript Array map() Method works?
Map Method is one of the utilities present in the JavaScript libraries that helps to store the result of an operation performed on each element of the array to a new array at the corresponding index. This method has specifications in ECMAScript(ECMA-262) in Array libraries. This method requires the function of the operation to be performed on the elements of the array as one of its arguments. Other arguments, like thisVal is an optional parameter that is by default declared as “Undefined” if not passed.
This method creates a new array with the same length as of the existing array. Then it performs the function call to the operation to be performed with passing the elements of the array one by one as the currentVal parameter. The result of the operation is stored at the index being passed as an argument or by default the index of the element in an existing array. Since the length of the existing array is considered to create a new array, this method does not operate if there are no elements in the array. Thus this method must not be called for an empty array.
Examples of JavaScript Array map()
Given below are the examples of JavaScript Array map():
Example #1
Here we are checking if the element of the array is EVEN or ODD and storing the result in new array using map method.
Code:
<!DOCTYPE html>
<html>
<body>
<p>Check if the Number is odd or Even </p>
<p id="demo"></p>
<script>
varnumArr = [65, 44, 77, 90,12];
varresArray = numArr.map(checkEvenOrOdd)
function checkEvenOrOdd(num) {
if(num%2 ==0) {
return num.toString().concat(" is EVEN \n");
}
else{
return num.toString().concat(" is ODD \n");
}
}
document.getElementById("demo").innerHTML = resArray;
</script>
</body>
</html>Output:
Here, map() calls checkEvenOrOdd method for each element of the array passed in num variable and the result is stored at the corresponding index in the resArray .
Example #2
Here we have names of the students of the class and their marks and we need to print the Result out .
Code:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get a new array with the Marks of each student in the class.</p>
<button onclick="myFunction()">Press to get the Result</button>
<p>Result: <span id="demo"></span></p>
<script>
varstudentArray = [
{Name : "Raj", Gender: "Male", Marks: "40"},
{Name : "Gill", Gender: "Male", Marks: "60"},
{Name : "Shahid", Gender: "Male", Marks: "80"},
{Name : "Tina",Gender: "Female", Marks: "77"},
{Name : "Rose", Gender: "Female", Marks: "56"},
{Name : "Mickey", Gender: "Male", Marks: "79"}
];
function getMarks (stud) {
if(stud.Gender =="Male"){
varpref ="Mr. ";}
else{
varpref ="Miss. ";
}
var result = [pref,stud.Name,stud.Marks].join(" ");
return result;
}
function myFunction() {
document.getElementById("demo").innerHTML = studentArray.map(getMarks);
}
</script>
</body>
</html>Output:
After clicking on the button:
Here, getMarks method is called in map method to get the result in presentable manner which gets out once we press the button.
Example #3
Here we will see to print the factorial of numbers in the array using map method.
Code:
<!DOCTYPE html>
<html>
<body>
<p>Factorial using Map Method </p>
<p id="demo"></p>
<script>
var numbers = [5,3,8,7];
varresArray = numbers.map(myFunction)
function myFunction(num) {
var res=1;
for(i = 1; i<num; i++)
{
res=i*res;
}
var ret= [" Factorial of ",num, "is",res].join(" ");
return ret
}
document.getElementById("demo").innerHTML = resArray;
</script>
</body>
</html>Output:
Here, we saw map method called myFunction for each member of the array numbers and print the result of it that is factorial of each number in new array resArray.
Conclusion
Map function helps to generate the new array and storing the results of the operation performed on each element of another array at the same index without any alteration made to the elements of the existing array. This function needs only one compulsory parameter to be passed as its argument is the operation to be performed on the elements.
Recommended Articles
This is a guide to JavaScript Array map(). Here we discuss the introduction, how JavaScript array map() method works? and examples respectively. You may also have a look at the following articles to learn more –
