JavaScript Array map() Method

01 Nov, 2021
Below is an example of the Array map() method.  
Example:  
JavaScript
<script>    // JavaScript to illustrate map() method    function func() {        // Original array        var arr = [14, 10, 11, 00];         // new mapped array        var new_arr = arr.map(Math.sqrt);        document.write(new_arr);    }    func();</script>
 Output:  
3.7416573867739413,3.1622776601683795,
3.3166247903554,0
The arr.map() method creates a new array with the results of a called function for every array element. This function calls the argument function once for each element of the given array in order. Syntax:  
array.map(callback(element, index, arr), thisArg)
Parameters: This method accepts five parameters as mentioned above and described below:  
callback: This parameter holds the function to be called for each element of the array.
element: The parameter holds the value of the elements being processed currently.
index: This parameter is optional, it holds the index of the currentValue element in the array starting from 0.
arr: This parameter is optional, it holds the complete array on which Array.every is called.
thisArg: This parameter is optional, it holds the context to be passed as this to be used while executing the callback function. If the context is passed, it will be used like this for each invocation of the callback function, otherwise undefined is used as default.
Return value: This method returns a new array created by using the values modified by the arg_function using the value from the original array. This function does not modify the original array on which this function is implemented.Below examples illustrate the arr.map() method in JavaScript:  
Example 1: In this example, the method map() produces an array containing numbers obtained by dividing the numbers in the original array by 2. 
var arr = [2, 56, 78, 34, 65];
var new_arr = arr.map(function(num) {
  return num / 2;
});
print(new_arr);
Output:  
[1, 28, 39, 17, 32.5]
Example 2: In this example, the method map() produces an array containing square roots of the numbers in the original array.  
var arr = [10, 64, 121, 23];
var new_arr = arr.map(Math.sqrt);
print(new_arr);
Output:  
[3.1622776601683795, 8, 11, 4.795831523312719]
Codes for the above function are provided below:Program 1:  
JavaScript
<script>    // JavaScript to illustrate map() method    function func() {        // Original array        var arr = [2, 56, 78, 34, 65];         // new mapped array        var new_arr = arr.map(function (num) {            return num / 2;        });         document.write(new_arr);    }    func();</script>
Output:  
1, 28, 39, 17, 32.5
Program 2:  
JavaScript
<script>    // JavaScript to illustrate map() method    function func() {        // Original array        var arr = [10, 64, 121, 23];         // new mapped array        var new_arr = arr.map(Math.sqrt);        document.write(new_arr);    }    func();</script>
Output:  
3.1622776601683795, 8, 11, 4.795831523312719
Supported Browsers: The browsers supported by the JavaScript Array map() method are listed below:  
Google Chrome 1 and above
Microsoft Edge 12 and above
Mozilla Firefox 1.5 and above
Safari 3 and above
Opera 9.5 and above
Polyfills are the codes that are used instead of Any function that does not support old browsers. 
Suppose an old browser that is not up-to-date with new ES features then your code will break in that browser.
Here we are creating a polyfill of Array.prototype.map( ) function. The steps are the following.
Steps :
Check is the browser supports the map( ) function or not.
Now create a function expression and assign it into the Array.prototype.map and the function take an argument.
Create an empty array.
Iterate the value of this and using the for-of loop. ( Here the value of this is the array where you called the map function )
Now use the callback function on every iterated value and push it into that array ( which you created empty)
return the array.
Implementation:
Javascript
// Check if the map function is supported by the browser or notif(!Array.prototype.map){    Array.prototype.map = function(callback){             // create an empty array        let newArr = [];         // Iterate the value of this        // Here the value of this is the array by        // which you called the map function                 for(let item of this){                     // Apply the callback function at every iteration            // and push it into the newArr array                         newArr.push(callback(item));        }                 // return the newArr        return newArr;    }} let a = [ 1, 2, 3, 4, 5, 6] a.map((item)=>{    console.log(item)}) // This code is contributed by _saurabh_jaiswal
Output :
1
2
3
4
5
6
_saurabh_jaiswal
arorakashish0911
ysachin2314
javascript-array
JavaScript-Methods
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
Roadmap to Learn JavaScript For Beginners
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?