• JavaScript Video Tutorials

JavaScript - Array map() Method

In JavaScript, the Array.map() method creates a new array by applying a provided function on each element of the original array. It doesn't modify the original array instead; it returns a new array with the results of applying the provided function to each element. This method does not execute the function for empty array elements.

Syntax

Following is the syntax of JavaScript Array map() method −

array.map(callbackFn (element, index, array), thisArg);

Parameters

This method accepts two parameters. The same is described below −

  • callbackfn − This is a callback function that will be called once for each element in the array. It further takes three arguments:
    • element − The current element being processed in the array.
    • index − The index of the current element being processed.
    • array − The array of the current element.
  • thisArg (optional) − It specifies a value passed to the function to be used as its this value.

Return value

This method returns a new array containing the results of applying the provided function to each element in the original array.

Examples

Example 1

In the following example, we are passing a multiplication function as a callback function to the map() method, where it multiplies all the array elements with number 10.

<html>
<body>
   <p id="demo"></p>
   <script>
      const numbers = [5, 10, 15, 20];
      const result = numbers.map(multiplication);
      function multiplication(num){
         return num * 10;
      }
      document.getElementById("demo").innerHTML = result;
   </script>
</body>
</html>

Output

As we can see the output, all the array elements are multipled by 10 and resulted in a new array.

50,100,150,200

Example 2

In the following example, we are passing a squareRoot function as a callback function to the map() method, where it calculates square root of all the elements in the array −

<html>
<body>
   <p id="demo"></p>
   <script>
      const numbers = [5, 10, 15, 20];
      const result = numbers.map(squareRoot);
      function squareRoot(num){
         return num * num;
      }
      document.getElementById("demo").innerHTML = result;
   </script>
</body>
</html>

After executing the above program, the map() method returns the square root of all the array elements.

Output

25,100,225,400

Example 3

Here, we are fetching the name of each player and total runs by passing callback function to the map() function.

<html>
<body>
   <p id="demo"></p>
   <script>
      const Players = [
         { name: "Virat Kohli", ODI: 13848, Test: 8676, T20: 4008 },
         { name: "Joe Root", ODI: 6522, Test: 11416, T20: 893 },
         { name: "Ricky Ponting", ODI: 13704, Test: 13378, T20: 401 },
         { name: "Hashim Amla", ODI: 8113, Test: 9282, T20: 1277 },
      ];
      const calculateStatistics = (item) => {
         let resultArr = {};
         resultArr.name = item.name;
         resultArr.TotalRuns = item.ODI + item.Test + item.T20;
         return resultArr;
      };
      let result = Players.map(calculateStatistics);
      document.getElementById("demo").innerHTML = JSON.stringify(result);
   </script>
</body>
</html>

Output

As we can see in the output, the map() method returned the name and total runs of all the players in a new array.

[{"name":"Virat Kohli","TotalRuns":26532},{"name":"Joe Root","TotalRuns":18831},{"name":"Ricky Ponting","TotalRuns":27483},{"name":"Hashim Amla","TotalRuns":18672}]
Advertisements