Iterating through an object: For in Loop vs For Loop

Question

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. 
javascript
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
javascript
for (var i = 0; i < students.length; i += 1) {
    student = students[i];
}

instead of using a For In Loop 
javascript
 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

Brandon Semilla · Accepted Answer

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 ({})).

Walter Stevenson · Answer

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 (http://stackoverflow.com/questions/5263847/javascript-loops-for-in-vs-for)

Welcome to the Treehouse Community

Looking to learn something new?

Chris Feltus

Chris Feltus

Iterating through an object: For in Loop vs For Loop

2 Answers

Brandon Semilla

Brandon Semilla

Walter Stevenson

Walter Stevenson