Difference Between For Loop And For-in Loop In Javascript

I found that there is a difference between for loop and for-in loop in javascript. When I define a new array: var a=new Array(); Then I put some value into in but not contiguousl

Solution 1:

for (... in ...) is typically used to iterate through the properties of objects (which are what javaScript uses for associative arrays), while the typical for loop is used for sequential arrays.

In your example, you are really creating an associative array with the keys 0, 1, and 4. If you wanted a true javaScript array, you'd use a.push(0), a.push(1), etc... in order to add the values, sequentially, onto the end of the array.

With a sequential array, the syntax for (var i = 0; i < arr.length; i++) makes i count from 0 to 1 less than the length of the array. This will allow i to be equal to each index in the array, one-by-one, allowing you to access each element in that array.

With associative arrays, however, the keys are non-sequential, so making a variable count 'from 0 to 1 less than the length of the array' won't produce the desired results. In your example it is close to working because your manually created keys just happen to be 0, 1, and 4, which are almost sequential.

If you want to have an array with non-sequential keys--'non-contiguous' as in 0, 1, 4, etc..--you should probably use objects, not arrays, e.g.

var obj = {};
obj[0] = 0;
obj[1] = 1;
obj[4] = 4;

And then using the for (... in ...) loop would be the correct syntax.

Solution 2:

For loop iterates over them until the i reaches to 5 so i = 0,1,2,3,4,5 and iterates over all. But with for...in loop iterates over their properties only not 0 to 5 but 0,1,4 that you've defined.

From MDN:

Note: for..in should not be used to iterate over an Array where index order is important.

Array indexes are just enumerable properties with integer names and are otherwise identical to general Object properties. There is no guarantee that for...in will return the indexes in any particular order and it will return all enumerable properties, including those with non–integer names and those that are inherited.

Because the order of iteration is implementation dependent, iterating over an array may not visit elements in a consistent order. Therefore it is better to use a for loop with a numeric index (or Array.forEach or the for...of loop) when iterating over arrays where the order of access is important.

Solution 3:

for-in loop enumerates on the enumerable properties of a variable. For your array, "0", "1" and "4" are added as enumerable property on the array. Therefore, for-in loop only gets 0, 1 and 4 in "i".

for loop works with the i = 0 to 5. so you try to access values at 2 and 3 as well which obviously are undefined.

Solution 4:

The syntax

for (var k in obj)

is actually a for-each loop. It iterates through the properties of an object. You should familiarize yourself with JavaScript objects. An object is map of keys to values.

So, the for-each loop can be very useful with objects. But, when looping through an array, it's better to use a regular for loop.

Here is an example of a for-each loop used on the properties of an object: http://jsfiddle.net/nbtLpw0z/.

Solution 5:

I am useing for-in loop because it is a shorter form, but sometimes you may want to have control over the iteration variable. For instance, if you want to iterate over even indices, you'd need to use the normal for loop:

for (var i = 0; i < myarray.length; i+=1) {...}

The same applies, for example, if you want to iterate backwards:

for (var i = myarray.length-1; i >= 0; i--) {...}

Certainly, for objects, the for-in loop allows you to get the property name in the iteration variable.for ex.

var obj = {year: 2014, city: "Surat"}
 for (var propn in obj) alert(propn + " = " + obj[propn]);

In your example, I'd use for-in because you are doing a simple iteration. Moreover I think in a non-optimized Javascript compiler/interpreter, the for-in loop would be even faster because variable increment is done internally.