Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Iterating through an object: For in Loop vs For Loop

In the JS basics course we are instructed to iterate through Objects using the for In loop, and use the for loop to iterate through arrays.

However, just a few lessons later, the instructor is iterating through an object using a for in loop.

For example we have a student object containing several properties.

var students = [ 
   name: 'Dave',
    track: 'Front End Development',
    achievements: 158,
    points: 14730
    name: 'Jody',
    track: 'iOS Development with Swift',
    achievements: 175,
    points: 16375
    name: 'Jordan',
    track: 'PHP Development',
    achievements: 55,
    points: 2025

In the Javascript basic course Dave uses the for loop to iterate through this object as shown below.

Using For Loop to Iterate

for (var i = 0; i < students.length; i += 1) {
    student = students[i];

instead of using a For In Loop

 for (var key in students) {
    //code in here

This is a bit confusing to me, I thought we were supposed to use for in loops specifically for objects? I would appreciate any clarification. Thanks

2 Answers

Brandon Semilla
Brandon Semilla
4,858 Points

In this case, the students variable is representing an array, as opposed to an object. When Dave is using the for loop in your second code snippet, he's looping through the students array.

I'd also like to mention that, technically, as JavaScript is an "Object-Oriented Programming" language (OOP), where nearly all variable types are objects, are you can use a for-in loop for supposedly all variables (though for-in loops are definitively best used with explicitly defined objects ({})).

Don't use for..in for Array iteration.

It's important to understand that Javascript Array's square bracket syntax ([]) for accessing indicies is actually inherited from the Object...

obj.prop === obj['prop'] // true The for..in structure does not work like a more traditional for..each/in that would be found in other languages (php, python, etc...).

Javascript's for..in is designed to iterate over the properties of an object. Producing the key of each property. Using this key combined with the Object's bracket syntax, you can easily access the values you are after.

var obj = { foo: "bar", fizz: "buzz", moo: "muck" };

for ( var prop in obj ) { console.log(prop); // foo / fizz / moo console.log(obj[prop]); // bar / buzz / muck } And because the Array is simply an Object with sequential numeric property names (indexes) the for..in works in a similar way, producing the numeric indicies just as it produces the property names above.

An important characteristic of the for..in structure is that it continues to search for enumerable properties up the prototype chain. It will also iterate inherited enumerable properties. It is up to you to verify that the current property exists directly on the local object and not the prototype it is attached to with hasOwnProperty()...

for ( var prop in obj ) { if ( obj.hasOwnProperty(prop) ) { // prop is actually obj's property (not inherited) } }

The problem with using the for..in structure on the Array type is that there is no guarantee as to what order the properties are produced... and generally speaking that is a fairly important feature in processing an array.

Another problem is that it usually slower than a standard for implementation.

Bottom Line

Using a for...in to iterate arrays is like using the butt of a screw driver to drive a nail... why wouldn't you just use a hammer (for)?

see stackoverflow