4.5 The `for .. of` Loop

Hi, folks, in this lesson, we're going to take a look at the for of loop, which was only added to JavaScript a couple of years ago. This is similar conceptually to the for in loop that we looked at in the last lesson, except that instead of getting the keys of the object being iterated, it gets the values instead. Object in the generic term, not just object literal in the JavaScript term. Because with the for of loop, we can't actually iterate actual objects. The for of loop is used to iterate over anything that is iterable. Which is usually an array-like collection of values. True arrays are iterable, but also array-like collections of items like the arguments value inside a function, for example, are also iterable. This makes the for of loop useful if we don't know whether we'll be working with a true array or an array like object. The syntax is very similar to the for in loop, that we looked at in the last lesson. We just use the of key word instead of the in key word. We don't need to use square bracket notation with the for of loop. We can access the value directly. Let's just take a look at the output in the browser. So the for of loop can iterate any kind of iterable, not just arrays. We can also use it with maps and sets, for example. So using a set works in pretty much the same way as using an array. When we come to use a map, however, we do need to revert to square bracket notation. Because recall that, when we get the value from a map, it returns an array. And we want to get the second item in that array, which will be the value. The first item on that array that gets returned at index zero is the key name. And let's just check in the browser that the output is what we expect. And of course, we don't use the add methods with maps, we use the set method. Let's just correct that. Just like with the for loop, we can stop executing the loop at any time using the break key word. This time we see only the first item from the last example, the value a. In terms of performance, the for of loop is slightly faster than both for and for in loops. But to be honest, you would have to be using an array or object with tens of thousands of items in it to really notice the difference. So, in this lesson we looked at the for of loop, the newest of the for loops in JavaScript. We saw that it could be used with arrays or any other iterable, but not with regular objects. We saw that the syntax was almost identical to the for in loop, except that instead of working with the keys of an iterable, we are working with the values instead. In the next lesson, let's take a look at iterators and iterables in more detail. Thanks for watching.