Are for... in loops useful in JavaScript?

It is typically used to loop over a collection of something. For instance, since every JavaScript object can be treated as a collection of properties, you can enumerate properties in this manner.

//let's loop throug all properties of a "document" 
//we don't know what these will be
var txtProps = "";
for (var prop in window.document) {
   txtProps += prop + "\n";
}
alert(txtProps);//pops out a message showing a looong list of all properties

I think it's OK so long as you understand that an object can hold more than simple variables. Consider this example, modified from w3schools.com to illustrate the point:

<script type="text/javascript">

//This is probably as you expect:
var person={fname:"John",lname:"Doe",age:25}; 

//This is probably unexpected and unwanted, but is valid and will be an output of the for...in loop:
person.f = function(){
 alert("Hi");
};

//Use typeof() function to check that the data type is what you expect:
for (x in person){
   document.write(typeof(person[x]) + " ");
}

</script>

This prints:

string string number function

To answer your specific question about the differences between loop types, the for() loop works well for array types with a length property. The foreach() loop can work well for iterating over collections of objects, while the foreach ...in loop works well for keys of an object (Not claiming that these are exclusive uses for any of the loop types).

To understand this, you first need to understand JavaScript's object model.

As you'll have noted, when working with arrays, for...in loops aren't that useful because for (;;) loops do the job more easily.

But arrays are just a type of JavaScript object with numeric properties, and for (;;) loops only handle numeric properties. The reason for the notation myArray[0] is that you can use this square bracket notation for any property name. So myObject['myProperty'] is the same as myObject.myProperty. This is where for...in becomes useful:

for (var i in myObject) {
    alert(myObject[i]);
}

So if the only property we'd set was myProperty, then i would equal "myProperty" (note that it's a string, which makes it more dynamic than just being a variable name).

There's a huge BUT here though. Objects have something called a prototype, and these prototypes have their own properties and methods. If I do the following:

for (var i in myArray) {
    alert(i + ': ' + myArray[i]);
}

...I won't just get alerted with numeric values (1, 2, 3, etc.) I'll also get alerted with the array's properties such as length, and its methods such as join. These properties actually belong to the Array object's prototype, and the prototype properties can be filtered out by doing the following:

for (var i in myArray) {
    if (myArray.hasOwnProperty(i)) {
        alert(i + ': ' + myArray[i]);
    }
}

Now I'll just get alerted with numeric values again, which means this is (almost) exactly the same as for (var i = 0;; i < myArray.length; i++). Why am I telling you this when we can just use that notation? Because all objects have prototypes, not just arrays. And every object descends from the Object object, so if somebody defined Object.prototype.myProperty = "some string value" then that would always show up in any for...in loop you use in the rest of the page. Thankfully, the hasOwnProperty method itself belongs to Object.prototype, so you can (and should) always use it in your for...in loops.

So here's a fully fledged for...in example:

// This is just one way of defining an object. We could also use a constructor function, or `new Object()`
var myObject = {
    aProperty : "my first property value",
    anotherProperty : "second property value"
    4 : "numeric property names work too, you know"
}

for (var i in myObject) {
    if (myObject.hasOwnProperty(i)) {
       document.write(i + ': ' + myObject[i] + '<br />\n'); 
    }
}

Output:

aProperty: my first property value
anotherProperty: secondPropertyValue
4: numeric property names work too, you know

Hopefully this explains it all.

Both for in and for serve specific purposes. Let's look at some.

If you have an object

var obj = { one: 1, two: 2 }; 

Then you can iterate over it's properties using the for in loop i.e

for( var i in obj ) console.log( obj[i] );  //use obj.hasOwnProperty(i) to exclude prototype properties 

note, if you try to iterate obj via a for loop it wouldn't work because it would use numeric indexes to access the keys and would give an undefined i.e obj[0] would be undefined. This is aside form the fact that getting the length of an object would be more involved than simply writing obj.length. Of course if you had numeric properties you would be able to use the for loop, for in is just a more natural fit for object iteration.

If you have an array

 var array = [1,2] 

you could technically use both but it's recommended that you use the for loop for this. Here's why

1. The element order is not guaranteed.
2. Prototype properties will also be iterated over, which could cause unwanted side effects.

To illustrate point two, let's extend Array.

Array.prototype.print_array = function(){ console.log(this) }; 

This function that we just added to Array will be inherited by all Array objects, hence, iterating over the array via a for in

for( var i in array ) console.log( array[i] ); 

Would yield

1
2
function (){ console.log(this) } // the prototype property was iterated over also

And iterating over the array with the for

for( var i =0; i < array.length; i++) console.log( array[i] ); 

would yield the expected result.

1
2

Hence, for object iteration use the for in and for array iteration use the for