This content originally appeared on Go Make Things and was authored by Go Make Things
Last month, we looked at the for...of loop. Since then, I’ve been asked a few times when you should use a for...of loop, and when you should use Array.forEach().
This is highly subjective, but I generally prefer a for...of loop in most situations. The only time I’d pick Array.forEach() instead are when I need the index of the item.
But, my friend Charles Roper shared a cool technique with me that you can use to get the index inside a for...of loop. Let’s take a look!
The Array.entries() method
The Array.entries() method returns a new Array Iterator of index/value pairs.
let wizards = ['Gandalf', 'Radagast', 'Merlin'];
let entries = wizards.entries();
The returned value is an iterable. You can’t access its values directly, but you can use the Iterator.next() method and the value property.
// returns [0, "Gandalf"]
entries.next().value;
The for...of loop and array destructuring
A few weeks ago, we also learned about the array destructuring syntax.
We can combine Array.entries() with array destructuring to get the index inside of the loop.
for (let [index, wizard] of wizards.entries()) {
console.log(wizard, index);
}
This is useful if, for example, you wanted to break a loop after a certain condition was met.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2021-02-11T15:30:00+00:00) How to get the index of an array item in a vanilla JS for…of loop. Retrieved from https://www.scien.cx/2021/02/11/how-to-get-the-index-of-an-array-item-in-a-vanilla-js-for-of-loop/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.