for…in loop
The for…in statement iterates over the enumerable properties of an object, in arbitrary order. For each distinct property, statements can be executed. The for…in loop is used to loop through an object’s properties and array’s elements.
Syntax:
for (variable in object) {
}
variable:
Every time it will get the unique property from the object or the element from the array when the loop is executed.
object:
It can be the array or the enumerable object.
The order of the for…in loop iteration is not guaranteed, it depends on the implementation of the object.
The loop will iterate over all enumerable properties of the object itself and those the object inherits from its constructor’s prototype.
for…in loop over the Object
var object = {
FirstName: "James",
LastName: "Bond"
};
for (var property in object) {
alert(property + " : " + object[property]);
}
//FirstName: James
//LastName: Bond
Please be aware that for…in loop will iterates over the all the properties of the object, so if the object has the inherited properties than it also will be accessed.
In simple language, for…in loop will be iterates over the all properties of the object including self properties and it’s parent object properties as well.
var extraProp = { isColored: true, isShape: true };
function Squre() {
this.color = "red";
this.width = 300;
this.height = 300;
}
Squre.prototype = extraProp;
var objSqure = new Squre();
for (var prop in objSqure) {
console.log(prop);
}
//color
//width
//height
//isColored
//isShape
When above code is run and for…in loop will executed than the you get the all the properties of the objSqure object as well as the properties which assigned to the Squre.prototype.
Because whatever we assigned to the Squre.prototype, it will be accessed by all the instance of the Squre object.
We can do the following workaround to get only the own properties not the global properties or the parent object properties by using the hasOwnProperty() method.
var extraProp = { isColored: true, isShape: true };
function Squre() {
this.color = "red";
this.width = 300;
this.height = 300;
}
Squre.prototype = extraProp;
var objSqure = new Squre();
for (var prop in objSqure) {
if (objSqure.hasOwnProperty(prop)) {
console.log(prop);
}
}
//color
//width
//height
for…in loop over the Array
Array indexes are just enumerable properties with the integer names and the Array indexes are always identical.
There will be no guarantee that for…in loop will return the indexes in any particular order.
The for…in loop statement will return all enumerable properties, including those with non–integer names and those that are inherited.
var array = [1, 2, 3, 4, 5];
for (var index in array) {
console.log(array[index]);
}
//1
//2
//3
//4
//5
Many JavaScript Expert does not recommended to use the for…in loop over the Array.
Why I does not use the for…in loop over the Array?
As we know the for…in loop access the all properties of the object.
First Reason
Array.prototype.GlobalProperty = 0;
// Now the GlobalProperty is the part of the
// every array as the property.
var array = [1, 2, 3, 4, 5];
for (var index in array) {
console.log(index);
}
//0
//1
//2
//3
//4
//GlobalProperty
As you seen in the above example for…in loop also give the GlobalProperty. But as we know the array does not have the string named index.
Let’s check above same array with the for loop.
Array.prototype.GlobalProperty = 0;
// Now the GlobalProperty is the part of the
// every array as the property.
var array = [1, 2, 3, 4, 5];
for (var index = 0; index < array.length; index++) {
console.log(index);
}
//0
//1
//2
//3
//4
As you seen there is difference between results generated by the for…in loop and for loop. for loop does not give the GlobalProperty.
Second Reason
var array = []; // Empty Array
array[0] = 1; // Totally valid,
array[2] = 2; // Array will be resized.
array[4] = 3;
alert(array.length); // 5
for (var index in array) {
console.log("Index: " + index + " Values: " + array[index]);
}
//Index: 0 Values: 1
//Index: 2 Values: 2
//Index: 4 Values: 3
As you seen the length of the array is 5, but the for…in loop is only iterated the 3 times which is not valid.
Let’s see same array with the for loop.
var array = []; // Empty Array
alert(array.length); // 5
array[0] = 1; // Totally valid,
array[2] = 2; // Array will be resized.
array[4] = 3;
for (var index = 0; index < array.length; index++) {
console.log("Index: " + index + " Values: " + array[index]);
}
//Index: 0 Values: 1
//Index: 1 Values: undefined
//Index: 2 Values: 2
//Index: 3 Values: undefined
//Index: 4 Values: 3
As you seen there is difference between results generated by the for..in loop and for loop.
As you seen the length of the array is 5, and the for loop is iterated the 5 times which is totally valid.
The result is generated by the for loop is the valid result, because the the length of the array is the 5 with the 3 valid values and 2 undefined values.