How to iterate a Map using JavaScript

Iterate through a Map using JavaScript

To iterate over a map object, use the forEach() method. The forEach() method takes a function that is invoked for each key/value pair in the Map, in insertion order. The function is passed the value, key and the Map object on each iteration.

Iterate through a Map using forEach() method.

Example –

const theMap = new Map([
  ['country', 'England'],
  ['age', 30],
]);

// Using forEach
theMap.forEach((value, key) => {
  console.log(value, key);
});

// Using for...of
for (const [key, value] of theMap) {
  console.log(key, value); 
}

// Iterate over a Map's keys
for (const key of theMap.keys()) {
  console.log(key);
}

// Iterate over a Map's values
for (const value of theMap.values()) {
  console.log(value); 
}

In the example, We used the Map.forEach() method to iterate over the key/value pairs in a Map.

The function we passed to the forEach() method is called with the following 3 arguments:

• The current value
• The current key
• The Map object being iterated over.

The Map.forEach() method is executed for values which are present but have the value undefined.

Iterate through a Map using for…of loop.

const theMap = new Map([
  ['country', 'England'],
  ['age', 30],
]);

for (const [key, value] of theMap) {
  console.log(key, value); 
}

The code creates a new Map object with two key-value pairs.
The for…of loop iterates over the Map object and logs the key and value of each pair to the console.

The for…of loop iterates over iterable objects, such as Maps, Sets, and arrays.

Assign the key and value variables using destructuring assignment.

const [key, value] = ['country', 'England'];
console.log(key); 
console.log(value);

The for…of loop is the best option if you need to exit the loop early using the break keyword. The break keyword is not supported in the Map.forEach() method.

Keep in mind that the output from the Map.keys() and Map.values() methods are not arrays, but iterator objects instead.

The Array.from method can be used to convert the Map’s values to an array. This is useful if you want to use the forEach() method.

const theMap = new Map([
  ['country', 'England'],
  ['age', 30],
]);

const keys = Array.from(theMap.keys());
const values = Array.from(theMap.values());
console.log(keys);
console.log(values);

Iterate through a Map using spread operator (…).

An alternative approach is to use the spread operator (…) to unpack the values from the iterator object into an array. This way, you can access the values in the array directly, without having to use the iterator object.
Example –

const theMap = new Map([
  ['country', 'England'],
  ['age', 30],
]);

const keys = [...theMap.keys()];
const values = [...theMap.values()];

Summary

You can iterate through a Map three ways in JavaScript using –

1. the Map.forEach() method,
2. a for...of loop,
3. or spread syntax.