Iterate over Map entries in JavaScript

This post will discuss how to iterate over the Map entries in JavaScript.

A map is a collection of key-value pairs that can store any type of data. By default, a map iterates its elements in insertion order, which means the order in which the elements were added to the map. Here are some common functions to iterate a map:

1. Using `forEach()` function

The forEach() function executes a callback function once for each key-value pair in the map, in insertion order. The function is called with the following arguments: value, key, and map. We can use an arrow function as a shorthand for this function. For example, to iterate over a map of names and ages and log them to the console, we can write:

// Create a map of names and ages

let map = new Map([["Mia", 25], ["Sophia", 30], ["Olivia", 35]]);

// Iterate over the map using the forEach function

map.forEach((value, key, map) => console.log(key + " is " + value + " years old"));

// Output:

// Mia is 25 years old

// Sophia is 30 years old

// Olivia is 35 years old

Download Run Code

2. Using `for…of` loop

The for…of loop allows us to iterate over iterable objects, such as maps, arrays, strings, etc. We can also use the destructuring assignment syntax to assign the key and value variables in a single line. To use it, we need to use the const keyword to declare two variables that will hold the key and value of each entry in the map. Then, we need to use the of keyword to specify the map object we want to iterate over. Here’s an example of this approach:

// Create a map of names and ages

let map = new Map([["Mia", 25], ["Sophia", 30], ["Olivia", 35]]);

// Declare name and age variables and assign them from each entry

for (const [name, age] of map) {

console.log(name + " is " + age + " years old");

}

// Output:

// Mia is 25 years old

// Sophia is 30 years old

// Olivia is 35 years old

Download Run Code

3. Using `entries()`, `keys()`, or `values()` functions

We can use the entries(), keys(), or values() functions to get an iterator of the key-value pairs, keys, or values of the map, respectively. We can use these functions to get an iterable object that we can loop over using the for…of loop or any other looping construct. For example, using the same map as before, we can do this:

// Create a map of names and ages

let map = new Map([["Mia", 25], ["Sophia", 30], ["Olivia", 35]]);

// Iterate over the key-value pairs using the for…of loop

for (let [key, value] of map.entries()) {

console.log(key + " is " + value + " years old");

}

// Output:

// Mia => 25

// Sophia => 30

// Olivia => 35

// Iterate over the keys using the for…of loop

for (let key of map.keys()) {

console.log(key);

}

// Output:

// Mia

// Sophia

// Olivia

// Iterate over the values using the for…of loop

for (let value of map.values()) {

console.log(value);

}

// Output:

// 25

// 30

// 35

Download Run Code

That’s all about iterating over the Map entries in JavaScript.

Iterate over Map entries in JavaScript

1. Using forEach() function

2. Using for…of loop

3. Using entries(), keys(), or values() functions

Share this:

1. Using `forEach()` function

2. Using `for…of` loop

3. Using `entries()`, `keys()`, or `values()` functions