Index inside map() Function

In JavaScript, map() method handles array elements, which creates a new array with the help of results obtained from calling function for each and every array element in an array. The index is used inside map() method to state the position of each element in an array, but it doesn’t change the original array.

Syntax:

array.map(function(currentelement, index, arrayobj) {

  // Returns the new value instead of the item

});

Parameters: The Index inside function accepts three parameters as mentioned above and described below:

  • currentelement: The currentelement is a required argument in map() which is the value of current element.
  • index: The index is an optional argument map() which is an array index of provided current element.
  • arrayobj: The arrayobj is an optional argument in map() which is the array object where the current element belongs.

Below examples illustrate the Index inside map() function:

Example 1:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
           "width=device-width, initial-scale=1">
</head>
  
<body style="text-align:center;">
      
    <h1 style="color:green;padding:13px;">
        GeeksforGeeeks
    </h1>
      
    <h3>Index inside map() Function</h3>
      
    <script>
        var student = ["Arun", "Arul", 
            "Sujithra", "Jenifer", "Wilson"];
          
        student.map((stud, index) => {
            alert("Hello... " + stud + "\n");
              
            var index = index + 1;
              
            alert("Your Position in Top 5"
                + " Rank is " + index + "\n");
        });
    </script>
</body>
  
</html>

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
   
<head>
    <meta charset="utf-8">
      
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
</head>
   
<body style="text-align:center;">
      
    <h1 style="color:green;padding:13px;">
      GeeksforGeeeks
    </h1>
      
    <h3>Index inside map() Function</h3>
      
    <script>
        var webname = ["welcome", "to",
                    "GeeksforGeeeks"];
          
        webname.map((web, index) => {
            document.write(web + "<br>");
        });
          
        // check in console
        webname.map((web, index)
            => console.log(web, index));
    </script>
</body>
   
</html>

chevron_right


Output:

welcome
0
to
1
GeeksforGeeeks
2

Supported Browsers: The browsers supported by Index inside map() function are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • 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.