This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In


    Iterate Over Items with JavaScript's for-of Loop

    Akash GuthaAkash Gutha

    In this lesson we will understand the For Of loop in Javascript which was introduced in ES6. The for-of loop lets you iterate of an itterable object (array, string, set, or map) and returns each objects value in a specified variable. This excludes plain objects as we will see in the lesson.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    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.