How to iterate over Map elements in JavaScript ?

Map() is a collection of elements in JavaScript where each element is kept as a Key and value pair. This method applies a callback function as a parameter to each element of the array before returning the updated array.

The Map() keyword is used to generate the object. The map() method loops through each object in the given array. The map() method combines with the entries() method to loop through the object and returns an array containing key-value pairs as its data.

Here we have two methods to iterate Map element in JavaScript:

Approach 1: Using for…of loop

The for…of loop iterates over the iterable objects (like Array, Map, Set, arguments object, …, etc), invoking a custom iteration hook with statements to be executed for the value of each distinct property.

Syntax:

for ( variable of iterableObjectName) {
    ...
}

Example: In this example, we are using for…of the loop to iterate over the map object.

Javascript

let newMap = new Map()

newMap.set("Cricket", "sport");
newMap.set("Apple", "fruit");

for (let [key, value] of newMap) {
    console.log(key + " is " + value);
}

Output

Cricket is sport
Apple is fruit

Approach 2: Using forEach() loop

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

Syntax:

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

Example: Here we show the basic use of the Javascript Map.forEach() method.

Javascript

// Creating a map using Map object
let newMap = new Map();

// Adding values to the map
newMap.set("Monday", 1);
newMap.set("Tuesday", 2);
newMap.set("Wednesday", 3);

// Logging map object to console
newMap.forEach((values, keys) => {
    console.log(values, keys);
});

Output

1 Monday
2 Tuesday
3 Wednesday

Approach 3: Using Map.keys() method

In this Approach, we are using map.keys() method for iteration of the given map. the key() method returns the value and the result. This returns the iterator object that contains keys in the map.

Example: In this example, we are using map.keys() method for iteration of the given map.

Javascript

let myMap = new Map([['a', 1],
    ['b', 3], ['d', 10]])
let keys = myMap.keys();

while (true) {
    let result = keys.next();
    if (result.done) break;
    console.log(result.value);
}

Output

a
b
d