How to Iterate or Loop Through Map in JavaScript

by

To iterate or loop through Map in JavaScript, you can use the forEach() function, for…of loop, or iterators.

Method 1: Using the forEach() function

const mainMap = new Map([
  ["key1", "value1"],
  ["key2", "value2"],
  ["key3", "value3"],
 ]);
 
 mainMap.forEach((value, key) => {
   console.log(`Key: ${key}, Value: ${value}`);
 });

Output

Key: key1, Value: value1
Key: key2, Value: value2
Key: key3, Value: value3

Method 2: Using the for…of with entries()

const mainMap = new Map([
  ["key1", "value1"],
  ["key2", "value2"],
  ["key3", "value3"],
 ]);
 
 for (const [key, value] of mainMap.entries()) {
   console.log(`Key: ${key}, Value: ${value}`);
 }

Output

Key: key1, Value: value1
Key: key2, Value: value2
Key: key3, Value: value3

Method 3: Using for…of with keys() and values()

const mainMap = new Map([
  ["key1", "value1"],
  ["key2", "value2"],
  ["key3", "value3"],
]);

for (const key of mainMap.keys()) {
  console.log(`Key: ${key}`);
}

for (const value of mainMap.values()) {
  console.log(`Value: ${value}`);
}

Output

Key: key1
Key: key2
Key: key3
Value: value1
Value: value2
Value: value3

Method 4: Using for…of directly on the Map

const mainMap = new Map([
  ["key1", "value1"],
  ["key2", "value2"],
  ["key3", "value3"],
]);

for (const [key, value] of mainMap) {
  console.log(`Key: ${key}, Value: ${value}`);
}

Output

Key: key1, Value: value1
Key: key2, Value: value2
Key: key3, Value: value3

These methods allow you to iterate through a Map object and access its keys and values. Choose the method that best suits your use case and coding style.

That’s it.

Leave a Comment