JavaScript Array map()
In this post, we will discuss map() method available in JavaScript Array.
map()
The map() method returns a new Array by mapping all the elements in the existing array to a function. We need to write a function for condition and pass the function name to the map() as a parameter. The function may be user-defined or in-built.
Syntax:
array_name.map(function_name)
Here, 'array_name' is the name of the array. It will take 'function_name' as a parameter.
Example 1:-
Let's create an array that hold 5 integers and add 5 to each of them. Here, the map function is - marks+5
<html>
<body>
<script>
// Create an array that hold 5 integers.
const marks =[10,20,30,40,50];
document.writeln("Existing Marks: <br>");
document.writeln(marks);
document.writeln("<br>");
document.writeln("<br>");
function map1(marks) {
return marks+5;
}
// Pass the function to the map.
document.writeln("Marks after adding 5 to each element: <br>");
document.writeln(marks.map(map1));
</script>
</body>
</html>
Output:
Existing Marks:
10,20,30,40,50
Marks after adding 5 to each element:
15,25,35,45,55
We can see that map() returned a new array such that in the existing array are added with 5.
Example 2:-
Let's create an array that hold 5 integers and subtract 5 from each of them. Here, the map function is - marks-5
<html>
<body>
<script>
// Create an array that hold 5 integers.
const marks =[10,20,30,40,50];
document.writeln("Existing Marks: <br>");
document.writeln(marks);
document.writeln("<br>");
document.writeln("<br>");
function map1(marks) {
return marks-5;
}
// Pass the function to the map.
document.writeln("Marks after subtracting 5 from each element: <br>");
document.writeln(marks.map(map1));
</script>
</body>
</html>
Output:
Existing Marks:
10,20,30,40,50
Marks after subtracting 5 from each element:
5,15,25,35,45
We can see that map() returned a new array such that in the existing array are subtracted by 5.
Example 3:-
Let's create an array that hold 5 integers and return square roots and cosine values separately by-passing inbuilt functions to the map(). Here, the map function for square roots is - Math.sqrt and map function for Cosine values is - Math.cos
<html>
<body>
<script>
// Create an array that hold 5 integers.
const marks =[100,144,9,16,64];
document.writeln("Existing Marks: <br>");
document.writeln(marks);
document.writeln("<br>");
document.writeln("<br>");
// Pass the sqrt function to the map.
document.writeln("Square roots: <br>");
document.writeln(marks.map(Math.sqrt));
document.writeln("<br>");
document.writeln("<br>");
// Pass the cos function to the map.
document.writeln("Cosine values: <br>");
document.writeln(marks.map(Math.cos));
</script>
</body>
</html>
Output:
Existing Marks:
100,144,9,16,64
Square roots:
10,12,3,4,8
Cosine values:
0.8623188722876839,0.8711474010323434,-0.9111302618846769,-0.9576594803233847,0.39185723042955
Example 4:-
Let's create an array that hold 5 float types and return floor and ceil values separately by-passing inbuilt functions to the map(). Here, the map function for floor is - Math.floor and map function for ceil is - Math.ceil
<html>
<body>
<script>
// Create an array that hold 5 values.
const marks =[4.6,7.8,9.00,3.7,2.1];
document.writeln("Existing Marks: <br>");
document.writeln(marks);
document.writeln("<br>");
document.writeln("<br>");
// Pass the floor function to the map.
document.writeln("Floor Values: <br>");
document.writeln(marks.map(Math.floor));
document.writeln("<br>");
document.writeln("<br>");
// Pass the ceil function to the map.
document.writeln("Ceil values: <br>");
document.writeln(marks.map(Math.ceil));
</script>
</body>
</html>
Output:
Existing Marks:
4.6,7.8,9,3.7,2.1
Floor Values:
4,7,9,3,2
Ceil values:
5,8,9,4,3
We can see that floor and ceil values were returned in new array separately.
