How to Iterate Over Values in a Map in JavaScript - Step by Step Examples

How to Iterate Over Values in a Map in JavaScript ?

Answer

To iterate over values in a map in JavaScript, you can use the values method along with a for...of loop or the forEach method. This allows you to access each value in the map.

✐ Examples

1 Iterating Over Values Using for...of Loop

We can iterate over values in a map in JavaScript using a for...of loop with the values method, which provides a convenient syntax for iterating over all values in the map.

For example,

We start by declaring and initializing a map named myMap with some key-value pairs. In this example, the map has string keys and integer values.
We use the values method to get an iterable of the values in the map.
We iterate over the values using a for...of loop, accessing each value directly from the iterable.
We print each value to the console using the console.log function to verify that we are iterating over all values.

JavaScript Program

const myMap = new Map([
    ['one', 1],
    ['two', 2],
    ['three', 3]
]);

// Iterate over values using for...of loop
for (const value of myMap.values()) {
    console.log(value);
}

Output

1
2
3

2 Iterating Over Values Using forEach Method

We can iterate over values in a map in JavaScript using the forEach method, which provides a flexible way to access each value in the map.

For example,

We start by declaring and initializing a map named myMap with some key-value pairs. In this example, the map has string keys and integer values.
We use the forEach method to iterate over the key-value pairs in the map.
In the callback function passed to forEach, we access each value.
We print each value to the console using the console.log function to verify that we are iterating over all values.

JavaScript Program

const myMap = new Map([
    ['one', 1],
    ['two', 2],
    ['three', 3]
]);

// Iterate over values using forEach method
myMap.forEach((value, key) => {
    console.log(value);
});

Output

1
2
3

3 Storing and Iterating Over Values Separately

We can store values in a separate array and then iterate over the array in JavaScript, which provides a way to work with values independently of their keys.

For example,

We start by declaring and initializing a map named myMap with some key-value pairs. In this example, the map has string keys and integer values.
We declare an array named values to store the values from the map.
We use the values method to get an iterable of the values in the map and spread it into the values array using the spread operator.
We use a for loop to iterate over the values array and print each value to the console using the console.log function to verify that we have stored all values separately.

JavaScript Program

const myMap = new Map([
    ['one', 1],
    ['two', 2],
    ['three', 3]
]);

// Store values in a separate array
const values = [...myMap.values()];

// Iterate over the values array
for (const value of values) {
    console.log(value);
}

Output

1
2
3

Summary

In this tutorial, we learned How to Iterate Over Values in a Map in JavaScript language with well detailed examples.

◀ Previous Next ▶