Iterate Over Items with JavaScript's for-of Loop

[00:00] If you have been programming JavaScript for a while, you might have been familiar with the for-each loop and the for-in loop. Here, I will introduce you to a new kind of loop called as a for-of loop.

[00:12] The for-of loop was introduced in ES6 as an alternative to the for-in and the for-each loops. It lets you iterate over an iterable object, and returns each object's value into the variable.

[00:27] Though the for-in loop and the for-of loop look similar, they're fundamentally different. We can test this out using an example.

[00:34] First, we'll make an iterable object, in our case an array, and populate it with random strings. Then, we'll go ahead and iterate it using both of our loops.

[00:46] First, we'll start with the for-in loop. We'll get the variable as result from our iterable object, and we'll simply log it into our console.

[01:04] Let's make a separation between them, and then we'll go ahead and test our for-of loop. Here also, we'll do the same thing. We'll log the result.

[01:17] If you open our terminal and our index file, you can see that the outputs are totally different. That is because the for-in loop iterates through all the innumerable properties of an object, while the for-of loop operates a bit differently.

[01:35] You can think of them as iterators from C++. They iterate through the objects that are only marked as iterable. Let's clear this, and close this.

[01:45] Now if we go ahead and add to our array prototype, a function called as random function and make it equal to an MD function and run this in our terminal, you can see that the output from the for-in loop also contains the random function, while the for-of loop only contains the objects.

[02:08] You can clearly see that the for-in loop iterates through all the innumerable properties of the object, while the for-of loop iterates through only the iterable properties of an object.

[02:20] Let's test this with a string, since string is also an iterable. Let's call this string as Egghead.

[02:30] Now if you go ahead and check our results, you can see that each character is printed on a separate line. That is, the string is being treated as an iterable, and each character is the result.

[02:47] You can also close the iterators using closing statements like break, continue, and return. Return this, you can see that only E is printed, because the loop will break after a single iteration.

[03:00] You can also use the continue. Let's go ahead, write an if statement, and we'll check if the result is equal to H, and if it is, then we'll continue.

[03:11] This should produce the whole string without a H in it. As you can see, H is missing, so whenever the result is H, we will simply continue without logging the result. Now, let's replace our string with an plain object.

[03:27] If you go ahead and run this, you should get an error saying that iterable symbol.iterator is not a function. For the for-of loop to work, the iterable object should have a symbol.iterator, which is just a function that adds this functionality to the for-of loop, which will obviously be missing from the plain objects.

[03:50] Let's replace our plain object with a set, and run it. It will also work, giving out the values from the set, one and two, because these both are the unique values in the set.

[04:03] We can also use a map in the place of set, and this will work out. You can see that it has printed out each object separately.