DEV Community

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

Posted on

38 14

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!

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

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

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay