When to use for..of loop instead of for..in

#javascript #webdev #beginners

The traditional for loop is a thing of the past now that ES6 brought with it the new pretty and concise formats for looping over. But it is important to know the difference between the two syntax and how they work with different data types.

The main difference between for..in and for..of is that for..in iterates over the enumerable properties of an object while for..of iterates over the values that the iterable defines to be iterated over. This will get clear in a minute. But how does that affect using one instead of another?

var fares = [0.3, 0.5, 0.7, 1, 1.3] 
for(let fare in fares){     
    console.log(fare);  //0,1,2,3,4     
}

We may have expected the array values in our console but see the indexes instead. This is because in Javascript, arrays are also objects with indexes as their properties. As for..in loops over enumerable properties, hence you see the indexes there.

Now, how to loop over the values in the array? Here's where the for..of loop comes into play.

var fares = [0.3, 0.5, 0.7, 1, 1.3] 
for(let fare of fares){     
    console.log(fare);  //0.3,0.5,0.7,1,1.3     
}

That worked perfectly and we get the values in the console! Let's go through both of them again but using objects this time.

var cars={
    one: "car1",
    two: "car2",
    three: "car3"
    }; 

for(let car in cars){       
    console.log(car);  //"one","two","three"    
}

As expected the for..in loops over the enumerable properties of the object which we log in the console. But what happens when we use a for..of with an object?

var cars={
    one: "car1",
    two: "car2",
    three: "car3"
    }; 

for(let car of cars){       
    console.log(car);  //Uncaught TypeError: cars is not iterable   
}

Oops! On doing this we get a TypeError and that's because for..of loop requires the second argument to be an iterable. Since, objects in Javascript are not iterable unless they implement the iterable protocol, hence we get the error.

So now you know which for loop to use where. The gist being for..in for Objects and for..of for Arrays.

This is my first post on dev.to and I would love to hear what you think. I'm just getting started with blogging and your guidance and suggestions to make the experience better are appreciated. Thanks for reading!

Top comments (6)

Yusuf Aran • Jul 23 '19

Really simple and clear! Only thing that might be worth to mention is how to actually iterate over obejcts by using Object.keys, Object.values and Object.entries.