loading...
Cover image for When to use for..of loop instead of for..in

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

umaralam48 profile image Mohd Umar Alam ・2 min read

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!

Posted on by:

umaralam48 profile

Mohd Umar Alam

@umaralam48

Student | Learning Web Development | Interested in every technology on the face of the earth or beneath it.

Discussion

markdown guide
 

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.

 

I can't help but feel this is an indirect attack on a certain contributor on this site πŸ˜‚.

Good read!

 

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

Thanks btw!