Getting key/values using `for..of` in JavaScript

Question

I was just playing around with for...of and tried to see how intuitive it was to get both the key and value of an entity being looped on and got to the following state:

for (var divEntries of Array.from(document.querySelectorAll('div')).entries()) {
    console.log(divEntries[0]); // Key
    console.log(divEntries[1]); // Value
}

Is there a better way to do this which would be a bit more semantic than using array positions on entries?

The entries of querySelectorall are iterable anyway. You don't need that Array.from — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Jun 14, 2016 at 19:51
@BenjaminGruenbaum: Not in all browsers that already support for of :-/ — Bergi
– Bergi, Commented Jun 14, 2016 at 20:00

t.niese · Accepted Answer · 2016-06-14 19:49:00Z

3

A clearer way would be by using Destructuring assignment

for (let [key, value] of Array.from(document.querySelectorAll('div')).entries() ) {
   console.log(key);
   console.log(value);
}

MDN has a list of examples about how for...of can be used including the example with destructing.

answered Jun 14, 2016 at 19:49

t.niese

41k9 gold badges78 silver badges111 bronze badges

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

Comments

Bergi · Accepted Answer · 2016-06-14 19:49:25Z

2

Yes, it is more idiomatic to use destructuring in the loop header:

for (let [index, value] of Array.from(document.querySelectorAll('div')).entries()) {
    console.log(index); // Key
    console.log(value); // Value
}

answered Jun 14, 2016 at 19:49

Bergi

670k162 gold badges1k silver badges1.5k bronze badges

Collectives™ on Stack Overflow

Getting key/values using `for..of` in JavaScript

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related