DEV Community

Cover image for When to use for..of loop instead of for..in
Mohd Umar Alam
Mohd Umar Alam

Posted on

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

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)

Collapse
 
ysfaran profile image
Yusuf Aran

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.

Collapse
 
kylefilegriffin profile image
Kyle Griffin

I can't help but feel this is an indirect attack on a certain contributor on this site 😂.

Good read!

Collapse
 
umaralam48 profile image
Mohd Umar Alam

Umm..don't know about any such thing. What is that a reference to? :)

Thanks btw!

Collapse
 
realabbas profile image
Ali Abbas

Good one👍

Collapse
 
umaralam48 profile image
Mohd Umar Alam

Thanks!

Collapse
 
parv29 profile image
PARV

Great post