JavaScript Map forEach() Method
Below is the example of Map.forEach() Method
Javascript
<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
filter_none
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
< 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
filter_none
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
<!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
filter_none
Output:
Browsers Supported:
- Google Chrome
- Microsoft Edge
- Mozilla Firefox
- Internet Explorer
- Safari
- Opera