How to Iterate Through a Map in JavaScript

1. General Method to Iterate Through a Map in JavaScript
2. Use the for of Loop to Iterate Through a Map in JavaScript
3. Use forEach Method to Iterate Through a Map

A map has two components, the key and the value. The available techniques to traverse a map object initially grab the key and then iterates through the value or values. This loop terminates until the last map key, and its value is iterated (only if you do not terminate before that).

Here we will focus on the easiest methods to work on the iteration. The pre ES6 method for iterating a map object has comparative long code lines, whereas the ES6 brings new and simple ways to get the work done. In the following section, we will be discussing them.

General Method to Iterate Through a Map in JavaScript

For this instance, we will take an object that has an array value for each key. We will use the for in loop to grab the object and iterate it. Next, within the for in scope, we will run a normal for loop to iterate the array elements of the object keys.

Let’s check the code and output for better understanding.

var fruitMap = {
  fruits: ['Grape', 'Orange', 'Strawberry'],
  taste: ['sour', 'tangy', 'sweet']
};
for (var m in fruitMap) {
  console.log(fruitMap[m]);
  for (var i = 0; i < fruitMap[m].length; i++) {
    console.log(fruitMap[m][i]);
  }
}

Output:

Use the for of Loop to Iterate Through a Map in JavaScript

In the case of the for of loop, we will create a variable duo with the destructing assignment, which will unpack the key and value after each iteration. Here, we will have an instance tasteMap of a map constructor.

Also, we will load the object instance with appropriate pairs of keys and values. The tasteMap.entries() returns explicitly the iterable of key and value pairs.

Let’s hop on to the code fence to guess the outcome.

var tasteMap = new Map();
tasteMap.set('Grape', 'sour');
tasteMap.set('Strawberry', 'sweet');
tasteMap.set('Tomato', 'tangy');

for (var [key, value] of tasteMap.entries()) {
  console.log(key + ' = ' + value);
}

Output:

Use forEach Method to Iterate Through a Map

Here we have one of the popular ways of ES6 map iteration. This method is as simple as triggering a function with two arguments that are key and value. And you are ready to iterate and traverse the pairs with a few lines of code.

Code Snippet:

var tasteMap = new Map();
tasteMap.set('Grape', 'sour');
tasteMap.set('Strawberry', 'sweet');
tasteMap.set('Tomato', 'tangy');

tasteMap.forEach(function(key, val) {
  console.log(key + ' ' + val);
});

Output: