Let’s say you’re developing an app that allows users to create shopping lists for their weekly groceries.
Your app’s users can create lists and then add products and quantities (for example, 750 grams of tomatoes) to them. Under the bonnet, each grocery list is a Map object—and the grocery items and quantities are stored in key/value pairs:
// Create a map object for vegetables
let list1 = new Map();
// Store vegetables in key/value pairs
list1.set('tomatoes', 750);
list1.set('cucumbers', 500);
list1.set('peppers', 250);
Now suppose you’re working on a new feature for the app that requires you to iterate on the values stored in this Map object.
Generally speaking, there are two ways to do this—with the newer forEach method and the old-school for loop—and this tutorial will walk you through each of them so you can pick the best option for your needs.
With the forEach method
The forEach method executes a function for each key/value pair in the Map object. The execution happens in the original order of insertion of the key/value pairs (the first pairs are iterated on first, the second are iterated on second, and so on).
As explained at MDN Web Docs, the syntax of this method allows you to call an arrow function, a callback function, or an inline callback function. So you can use whichever is closest to your code base’s coding conventions and style guide. Here, we’ll use an arrow function for our example.
// Create a new list
let list1 = new Map();
// Store grocery items in key/value pairs
list1.set('tomatoes', 750);
list1.set('cucumbers', 500);
list1.set('peppers', 250);
// Iterate on grocery items using the forEach method
list1.forEach((value, key) => { console.log(key, value) } );Try giving this a spin right now! Open your browser’s developer console and run the code. Or if you’re reading this from your phone or tablet, check out the results in the screenshot below.
With a for loop
Another way to iterate on a Map object is with a for loop. The for loop repeats itself as many times as necessary until the specified condition for its execution is false.
// Create a new list
let list1 = new Map();
// Store grocery items in key/value pairs
list1.set('tomatoes', 750);
list1.set('cucumbers', 500);
list1.set('peppers', 250);
// Iterate on grocery items with a for loop
for ([key, value] of list1) {
console.log(key, value);
}If you were to run this code in your browser’s console, you would see the following result on the screen:
As you can see from the screenshot above, you get the same output, but with a different method (which is already telling us that both methods worked as expected).
Note: The original way to iterate on a list of elements in JavaScript is using a for loop. The forEach method is newer and it has its advantages, but it is also slower.
