Skip to main content

How to Iterate Through a Map in JavaScript

The Map object in JavaScript is a powerful collection of key-value pairs that, unlike plain objects, preserves insertion order. This makes iterating over a Map a predictable and common operation. Modern JavaScript provides several clean and idiomatic ways to loop through a Map's entries, keys, or values.

This guide will teach you the most effective methods for iterating over a Map. We will cover the recommended for...of loop, which is highly readable and flexible, as well as the functional forEach() method.

The for...of loop is the most versatile and readable way to iterate over a Map. A Map is a built-in iterable, and its default iteration returns a [key, value] pair for each entry in insertion order.

Map for all next examples:

const myMap = new Map([
  ['name', 'Alice'],
  ['age', 30],
  ['country', 'Canada'],
]);

How to Iterate Over [Key, Value] Pairs​

This is the most common iteration task. The for...of loop combined with destructuring assignment makes this incredibly clean.

Solution:

const myMap = new Map([
  ['name', 'Alice'],
  ['age', 30],
]);

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

Output:

Key: name, Value: Alice
Key: age, Value: 30
note

This is the recommended best practice for its readability and conciseness. You can also explicitly use the .entries() method (for (const [key, value] of myMap.entries())), but it's redundant as it's the default iteration behavior.

How to Iterate Over Keys Only or Values Only​

The Map object provides specific iterator methods for getting just the keys or just the values.

How to Iterate Over Keys​

Use the map.keys() method.

for (const key of myMap.keys()) {
  console.log(key);
}

Output:

name
age
country

How to Iterate Over Values​

Use the map.values() method.

for (const value of myMap.values()) {
  console.log(value);
}

Output:

Alice
30
Canada

The Functional Method: Map.prototype.forEach()​

The forEach() method provides a functional way to iterate over a Map. It calls a provided function once for each key-value pair.

Solution:

myMap.forEach((value, key) => {
  console.log(`Key: ${key}, Value: ${value}`);
});

Output:

Key: name, Value: Alice
Key: age, Value: 30
Key: country, Value: Canada
note

Important: Note that the order of the arguments in the callback is (value, key), which is different from the (key, value) order in the for...of destructuring. This can be a source of confusion. Additionally, you cannot use break or continue inside a forEach loop, which makes for...of more flexible.

How to Iterate in Reverse Order​

A Map does not have a built-in reverse() method. To iterate in reverse, you must first convert the Map's entries into an array.

Solution:

// 1. Convert the Map to an array of [key, value] pairs
const entries = [...myMap]; // or Array.from(myMap)

// 2. Reverse the array
const reversedEntries = entries.reverse();

// 3. Iterate over the reversed array
for (const [key, value] of reversedEntries) {
  console.log(`Key: ${key}, Value: ${value}`);
}

Output:

Key: country, Value: Canada
Key: age, Value: 30
Key: name, Value: Alice

Conclusion​

For iterating over a Map, modern JavaScript provides several excellent options.

  • The for...of loop is the recommended best practice. It is highly readable, flexible (allowing break and continue), and its destructuring syntax (for (const [key, value] of myMap)) is intuitive.
  • The forEach() method is a good functional alternative, but be mindful of its (value, key) argument order and its inability to be broken out of.
  • To iterate in reverse order, you must first convert the Map to an array, reverse it, and then loop.

Table of Contents