JavaScript map() | Map an Array to Create a New Updated Array

The JavaScript map() method is used when we need to create a new array after modifying or updating the elements of a specified array. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p id="xyz"></p>
   
   <script>
      const marks = [32, 43, 35, 46, 48];

      document.getElementById("xyz").innerHTML = marks.map(perc);
      
      function perc(x)
      {
         return x/50;
      }
   </script>
   
</body>
</html>

Output

In above example, each elements of an array marks was be divided by 50.

Note - The original array does not get effected by the map() function.

JavaScript map() Syntax

The syntax of map() method in JavaScript is:

array.map(functionName(currentElementValue, currentElementIndex, currentElementArray), thisValue)

The array, functionName, and currentElementValue are required. All others are optional.

Note - The array refers to an array whose elements are going to update, using the function functionName.

Note - The functionName refers to a function to execute for every elements of array.

Note - The currentElementValue basically refers to a variable that will be used to pass as an argument to the function that indicates to the current value/element of the specified array.

Note - The currentElementIndex refers to the index of the current element

Note - The currentElementArray refers to the array of the current element.

Note - The thisValue refers to a value passed to the specified function functionName as its this value. The default value is undefined

JavaScript map() Example

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p id="abc"></p>
   
   <script>
      const nums = [32, 43, 35, 46, 48, 37];

      const evenNums = nums.map(even);

      function even(x)
      {
         if(x%2==0)
            return x;
         else
            return x-1;
      }

      document.getElementById("abc").innerHTML = evenNums;
   </script>
   
</body>
</html>

Output

In above example, all odd numbers are converted into even numbers before initialize to evenNums array, by subtracting 1.

To use all the three parameters for the function used in map(). Here is an example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p id="myPara"></p>
   
   <script>
      const n = [31, 43, 35, 46, 48, 37];

      const en = n.map(even);

      function even(x, indx, arr)
      {
         if(indx==0 || indx==(arr.length-1))
            return x;
         if(x%2==0)
            return x;
         else
            return x-1;
      }

      document.getElementById("myPara").innerHTML = en;
   </script>
   
</body>
</html>

Output

Here is another example of map() function in JavaScript:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>
   
   <script>
      const students = [
         {fn: "Lucas", ln: "Brown"},
         {fn: "George", ln: "Wilson"},
         {fn: "Arthur", ln: "Davies"},
         {fn: "Oliver", ln: "Taylor"},
         {fn: "Harry", ln: "Smith"}
      ];

      const studentNames = students.map(sn);

      function sn(x)
      {
         return [x.fn, x.ln].join(" ");
      }

      console.log("----List of Students----");
      
      for(let i=0; i<studentNames.length; i++)
         console.log(studentNames[i]);
   </script>
   
</body>
</html>

The snapshot given below shows the sample output produced by above JavaScript example:

JavaScript Online Test

« Previous Tutorial Next Tutorial »