difference between for loop and for-in loop in javascript

Question

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 contiguously for example:

a[0]=0;a[1]=1;a[4]=4; 

When I use for(i=0;i<5;i++) to get the value and use alert to show it, it's different from using for(i in a).

The previous one will show elements in index 2,3 which shows "undefined" while for-in will show only index 0,1,and 4. Can anybody tell me why?

Answer 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.

Answer 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.