Question

I’m using Google Chrome for this test:

Contrary to intuition, the first loop alerts "string" three times, while the second loop alerts "number" three times.

numarray = [1, 2, 3];

//for-each loop
for(num in numarray)
    alert(typeof(num));

// Standard loop
for(i=0; i<numarray.length; i++)
    alert(typeof(numarray[i]));

I was expecting both loops to alert "number" three times. How is the first loop implemented in JavaScript? In other words, if the for-each is syntactic sugar, what is its equivalent using a standard loop?

Also, is there some way to iterate over an object’s namespace using a standard loop? I’m looking to touch every one of some object’s methods and attributes using a loop of the second kind.

Answer 1

The reason you’re seeing “string” returned in your first loop is that num refers to the array index, not the value of numarray at that index. Try changing your first loop to alert num instead of typeof num and you’ll see that it spits out 0, 1, and 2, which are the indicies and not the values of your array.

When you use a for in loop, you’re iterating over the properties of an object, which is not exactly equivalent to the for loop in your second example. Arrays in JavaScript are really just objects with sequential numbers as property names. They are treated as strings as far as typeof is concerned.

Edit:

As Matthew points out, you’re not guaranteed to get the items in the array in any particular order when using a for in loop, and partly for that reason, it’s not recommended to iterate through arrays that way.

filip-fku asks when it would be useful to use for in, given this behavior. One example is when the property names themselves have meaning, which is not really the case with array indicies. For example:

var myName = {
  first: 'Jimmy',
  last: 'Cuadra'
};

for (var prop in myName) {
  console.log(prop + ': ' + myName[prop]);
}

// prints:
// first: Jimmy
// last: Cuadra

It’s also worth noting that for in loops will also iterate through properties of the object’s prototype chain. For that reason, this is usually how you’d want to construct a for in loop:

for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    // do something
  }
}

This does a check to see if the property was defined by the object itself and not an object it’s inheriting from through the prototype chain.