difference between for loop and for-in loop in jav

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 starters there is no point is using a for in loop on an Array because arrays in JavaScript can only have ordered, numeric indexes. So you can access the array at any index between the range of 0 and array.length - 1 Alas, if you wanted to use a for in loop to iterate over an array you certainly can, however, a regular for loop is more appropriate.

A for in loop is used when you don't have ordered numeric indices. JavaScript objects are really an ordered hash table. You can access keys of JavaScript objects with the in operator which returns the key for the object, and by accessing the object at that key you can get the value.

For example:

var obj = {
   hello: "world",
   world: "hello"
};

A regular for loop wouldn't work, so you would need t use a for in loop.

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

Objects also don't return a length property that is accurate enough to iterate over the entire object, so a for in loop is absolutely necessary.

Also note that by assigning values to the array not in the order in which the next free element would exist will automatically place undefined in the elements that you skipped.

In your example, the array would look like this:

[0, 1, undefined × 2, 4]

Answer 2

Under the hood the for-in loop is nothing but a for loop. For(i in x) is broken down in to -

for(i=0;i<x.length;i++) {
if(x[i] != undefined)
console.log(x[i]);
}

Answer 3

for-each loop is recommended for traversing object properties, whereas for loop is recommended for arrays. In your case you can use push() to get same results.

var a = []; //recommended way of declaring arrays over `new Arrays()`
a.push(0);
a.push(1);
a.push(4);
//usual for-loop
for (var i = 0; a.length > i; i++) //recommended
  console.log('a[', i, ']=', a[i]);
console.log('---------------------');
// for-each loop
for (var k in a) //not recommended
  console.log('a[', k, ']=', a[k]);
console.log('---------------------');

Open console...

var person = {
  'name': 'Adam'
};

for (var k in person)
  console.log('person.' + k, '=', person[k]);
console.log('----------------------');

person.age = 26; //new property

for (var k in person)
  console.log('person.' + k, '=', person[k]);
console.log('----------------------');

person['gender'] = 'Male'; //again a new property

for (var k in person)
  console.log('person.' + k, '=', person[k]);
console.log('----------------------');

person.name = 'Will'; //updating property

for (var k in person)
  console.log('person.' + k, '=', person[k]);
console.log('----------------------');

Open console...

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

Answer 5

Your "for" loop looks at all the values of the indices of the array from 0-4, as that is exactly what you are asking it to do. So it takes a look at a[0] and finds a value, then a[1] (same deal), then it goes to a[2] and realizes that you never initialized a value for a[2], therefore it's undefined. Same goes for a[3], and finally a[4] has a value so it finds it.

That type of "for" loop will check every index whether defined or not.

A "for ... in ..." loop will only check initialized values. Your array has 3 values that have been initialized, therefore it checks those. It will show them to you in the order of their indices, but the indices don't actually affect what it's looking at. So if you changed your "a[1]" to "a[3]" and "a[4]" to "a[10]", you'd still get the exact same answer when you use a "for ... in ..." loop.

Answer 6

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.