JavaScript Map forEach() Method

Below is the  example of Map.forEach() Method

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
    // Creating a map using Map object
    let mp=new Map()
      
    // Adding values to the map
    mp.set("a",1);
    mp.set("b",2);
    mp.set("c",3);
      
    // Logging map object to console
    mp.forEach((values,keys)=>{
      document.write(values,keys+"<br>")
    })
</script>

chevron_right


Output: 

1a
2b
3c

The Map.forEach method is used to loop over the map with the given function and executes the given function over each key-value pair.

Syntax:

myMap.forEach(callback, value, key, thisArg)

Parameters: This method accepts four parameters as mentioned above and described below:



  • callback: This is the function that executes on each function call.
  • value: This is the value for each iteration.
  • key: This is the key to reach iteration.
  • thisArg: This is the value to use as this when executing callback.

Returns: It returns the undefined value.

Code for the above method is provided below:
Program 1:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
  
    // Creating a map using Map object
    let mp=new Map()
      
    // Adding values to the map
    mp.set("a",65);
    mp.set("b",66);
    mp.set("c",67);
    mp.set("d",68);
    mp.set("e",69);
    mp.set("f",70);
      
    // Logging map object
    document.write(mp+ "<br>");
    mp.forEach((values,keys)=>{
      document.write("values: ",values+
                     ", keys: ",keys+ "<br>")
    })
</script>

chevron_right


Output: 

[object Map]
values: 65, keys: a
values: 66, keys: b
values: 67, keys: c
values: 68, keys: d
values: 69, keys: e
values: 70, keys: f

Program 2:

HTML

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.0">
  <title>Document</title>
</head>
<body>
  <ul class="list">
  </ul>
  <script>
    // Creating a map using Map object
    let mp=new Map()
    //adding values to the map
    mp.set("a",65);
    mp.set("b",66);
    mp.set("c",67);
    mp.set("d",68);
    mp.set("e",69);
    mp.set("f",70);
    //logging map object to console
    document.log(mp);
    let ul=document.querySelector("ul");
    mp.forEach((values,keys)=>{
      ul.innerHTML+=ul.innerHTML="<li>"+keys+" =>"+values+"</li>"
    })
  </script>
</body>
</html>

chevron_right


Output:

Browsers Supported: 

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