The for...of loop in vanilla JS

Yesterday, I wrote about how I’m officially dropping support for IE in all of my stuff.

Today, I want to look at a simple, humble modern feature: the for...of loop.

What it is

A for...of loop provides a way to loop over iterable objects.

That includes strings, arrays, and other array-like objects such as NodeLists and the arguments object. It also includes new object types like Set() and Map(), which we’ll be looking at in the near future.

It’s more-or-less like the for...in loop for iterative over objects, but for everything else.

How it works

In a for...of loop, you define a variable to represent the current item of the iterable you’re looping through. Inside the block (the stuff between curly brackets), you can use that variable to reference the current item.

let wizards = ['Gandalf', 'Radagst', 'Hermione', 'Neville'];

// logs "Gandalf", "Radagast", "Hermione", "Neville"
for (let wizard of wizards) {
	console.log(wizard);
}

Here’s a demo.

Why is this needed?

We’ve always had a way to loop over arrays, NodeLists, and such: the for loop.

But also, the for loop sucks. Having to define a counter variable and then access the item by its index is messy and clunky and not very nice.

for (let i = 0; i < wizards.length; i++) {
	// also logs the current wizard in the loop
	console.log(wizards[i]);
}

The Array.forEach() method provides a nicer syntax, but does not provide a way to break a loop before iterating through every item.

It also only works with arrays, and requires you to use Array.from() to convert an iterable into an array before using it.

wizards.forEach(function (wizard) {
	// ALSO also logs the current wizard in the loop
	console.log(wizard)
});

The Array.forEach() method still has its place, but for simple looping, the for...of method is a solid choice.