Using for..of loop on ES6 Map

Question

I was reading this example of using a for.. of loop on a Map, and I was a bit confused with this syntax:

var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");

for (var [key, value] of myMap) {
  console.log(key + " = " + value);
}

Specifically, I don't understand the array destructuring that is happening. I understand that you can use array destructuring to do something like let [one, two] = [1, 2];, but what is happening in this example? myMap isn't an array so why is this getting the correct values?

Another question I have is why is the order key, value in the destructuring, but when you do a forEach() the order is value, key, like here:

myMap.forEach((value, key) => {
  console.log(key + " = " + value);
});

Ry- · Accepted Answer · 2015-12-21 07:02:51Z

58

for (var [key, value] of myMap) {
    console.log(key + " = " + value);
}

is like

for (let pair of myMap) {
    var [key, value] = pair;
    console.log(key + " = " + value);
}

So it’s not myMap that has to be an array for the destructuring to work; rather, each of its elements has to be an array when it’s iterated over, and iterating over a map indeed produces arrays (key/value pairs).

Map#forEach’s argument order is probably for consistency with Array#forEach, which calls the function with arguments (item, index); it, in turn, probably does that because you don’t always need the index.

edited Dec 21, 2015 at 7:02

answered Dec 21, 2015 at 6:59

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alexander Mills · Accepted Answer · 2018-07-18 00:47:02Z

8

Slightly off topic but as an aside:

myMap.forEach((v,k) => {});

is about 50% more performant than

for (var [key, value] of myMap) {

}

so perhaps consider using Map.prototype.forEach (not to be confused with Array.prototype.forEach).

answered Jul 18, 2018 at 0:47

Alexander Mills

102k167 gold badges549 silver badges936 bronze badges

6 Comments

Eugene Over a year ago

Doesn't it depend on the JS engine? Is it still true in 2021? Sounds like premature micro optimization.

AgnosticMantis Over a year ago

Also awaiting async calls is difficult with .forEach but works out of the box with for ... of

Alexander Mills Over a year ago

@AgnosticMantis you are right if you want things to run in series, but in the off chance that you want them to run in parallel, then myMap.forEach(async (k,v) => await x(k,v)) would work fine

AgnosticMantis Over a year ago

@Alexander Mills Yeah, that would work for that use-case. Though this will have a fire and forget behaviour. For running them in parallel and also being able to react on the result(s) I'd rather use something like Promise.all([...].map(async () => {...})).

Jay Wang Over a year ago

Source for the performance advantage? I remember for of is always faster than forEach()?

|

the8472 · Accepted Answer · 2015-12-21 13:53:05Z

2

myMap isn't an array so why is this getting the correct values?

Map's prototype has a [Symbol.iterator] property, which means instances of Map implement the iterator contract.

for of loops make use of iterators to loop over objects.

In other words, for of loops don't need arrays, they need iteratables. Arrays are just one type of iterable, maps are another.

In the case of maps the iterator yields a 2-element array consisting of key and value for each iteration. It also has additional methods that allow you to iterate over just the keys or the values.

answered Dec 21, 2015 at 13:53

the8472

43.5k6 gold badges79 silver badges139 bronze badges

Comments

Sumer · Accepted Answer · 2022-04-07 15:22:32Z

-3

All, Allow me to add that how the asked syntax works.

The Map.entries() method returns a new Iterator object that contains the [key, value] pairs for each element in the Map object in insertion order.

for (var [key, value] of myMap.entries()) {
  console.log(key + " = " + value);
}

But in your question you haven't added .entries but still it works. The reason is the symbol.Iterator points by default to Map.prototype.entries() function. This is the reason you include or exclude it works both ways. As explained above the .entries() function returns an Iterator of array([key,value] pair).

edited Apr 7, 2022 at 15:22

answered Dec 16, 2018 at 1:21

Sumer

2,9251 gold badge26 silver badges25 bronze badges

2 Comments

Andrew Li Over a year ago

The Map#entries method does NOT return an arrays. It returns an iterator that yields key value pairs, which can be consumed via for…of. You also forgot to call entries.

Sumer Over a year ago

Thanks for correcting, On the top of explanation I have written clearly that it returns an iterator. I have edited the below statement as well. Request you to upvote me as my reply was missing in the discussion and is a value add.

Collectives™ on Stack Overflow

Using for..of loop on ES6 Map

4 Answers 4

Comments

6 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

6 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related