Loops: for..of and for..in

We've just covered the basic loops of JavaScript called for and while. Especially the for loop is very flexible and can be used for pretty much any use-case. However, in more recent versions of JavaScript, two new versions of the for loop was added: The for..of loop and the for..in loop.

The for..of loop

You can use the for..of loop to iterate over any type of iterable object and while we haven't covered this specific topic yet, as its quite advanced, I want you to know about the for..of loop already now - we can always talk more about iterable objects later on.

At this point, you just need to know that there are several built-in objects that implements the functionality required to work as an iterable object. The Array object is the most obvious one, but actually, the String object implements it as well. We haven't really discussed arrays, objects or strings in detail yet, so at this point, I'll keep the examples simple and illustrative - you can always come back to this article if you want a brushup of how these special for-loops work.

First, to illustrate the difference between a normal for loop and the specialized for..of loop, this is how we would previously loop over an Array:

let fruits = ["Apple", "Pineapple", "Banana"];

for(let i = 0; i < fruits.length; i++)
	alert(fruits[i]);

Thanks to the length property of the Array, we know how far we can go when we want to access each item of the array. This works just fine, and previously, this would definitely be the way you would loop over an array.

But thanks to the for..of loop, we can simplify the process quite a bit. Just look at this example, which does the same, but with a much simpler syntax:

let fruits = ["Apple", "Pineapple", "Banana"];

for(let fruit of fruits)
	alert(fruit);

The way it works is quite simple: A variable is declared, called fruit (you can call it whatever you want, of course), and on each iteration, this variable is updated with the next item of the array. Simple and effective!

And because the String object is also an iterable object, we can easily loop over it as well:

let text = "Hello!";
for(let c of text)
	console.log(c);
// Expected output:
/*
"H"
"e"
"l"
"l"
"o"
"!"
*/

The for..in loop

We have the for..of loop for collections (like arrays) and then we have the for..in loop for objects. Since objects in JavaScript are basically just a collection of keys and values, we can loop over the properties which can be really useful. Again, we'll talk much more about objects later in this tutorial, but for now, just consider this example of how a for..in loop works:

let obj = 
{
	name: "John Doe",
	age: 42
};

for(let prop in obj)
{
	alert(prop);
}

// Expected output:
// "name"
// "age"

As you can see, it looks and behaves much like the for..of loop, but in this case, we get the property name on each iteration. If we want to, we can of course use this name to retrieve the actual value of the property, like this:

let obj = 
{
	name: "John Doe",
	age: 42
};

for(let prop in obj)
{
	alert(prop + " = " + obj[prop]);
}

// Expected output:
// "name = John Doe"
// "age = 42"

As you can see, this is both easy and quite powerful and as soon as you start working with objects, you'll quickly appreciate the for..in loop.

Loop control: break and continue

We introduced the break and continue keywords in the previous article, where we used them together with the for and while loops, but they work exactly the same way in for..of and for..in loops. The continue keyword will skip to the next iteration of the loop, while the break keyword will exit the loop immediately. Here's an example:

let text = "Hello!";
for(let c of text)
{
	if(c == "l")
		continue;
	if(c == "!")
		continue;
	alert(c);
}
// Expected output:
// "H"
// "e"
// "o"

In this example, we use both break and continue. We loop over the string "Hello!" and when we run into an "l", we continue (skipping the current iteration and moving on to the next), and if we run into a "!", we break (skip the current iteration and exit the loop). If no break or continue is hit, we output the current character, resulting in the letters "H", "e" and "o" being sent to output.

Summary

The for..of and for..in loops are a nice, and recent, addition to the JavaScript language, making it easier to loop over especially arrays and objects. They don't offer any direct advantage over using the good, old for and while loops, except for the fact that they are quicker to type and might make your code look less complex.

As mentioned, arrays and objects haven't been covered in this tutorial yet, but you will learn more about them in upcoming chapters, so keep our two specialized loops in mind when you start working with these types.