JavaScript Array map() Method

Below is the example of Array map() method.

  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    

  • Output:
    3.7416573867739413,3.1622776601683795,
    3.3166247903554,0
  • The arr.map() method creates a new array with the results of 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 valued 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 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 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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    

    Output:

    1, 28, 39, 17, 32.5
    

    Program 2:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    

    Output:

    3.1622776601683795, 8, 11, 4.795831523312719
    

    Supported Browsers: The browsers supported by JavaScript Array map() method are listed below:

    • Google Chrome
    • Microsoft Edge 9.0
    • Mozila Firefox 1.5
    • Safari
    • Opera

    full-stack-img




    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.