Skip to content
Related Articles

Related Articles

JavaScript Array map() Method
  • Last Updated : 24 Mar, 2021
GeeksforGeeks - Summer Carnival Banner

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
  • Microsoft Edge 9.0
  • Mozilla Firefox 1.5
  • Safari
  • Opera

Polyfill

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 not
if(!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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :