In this Post we are going to see,how to iterate over an enumerable Property in an Javscript Objects.
The for..in loops iterate over the enumerable properties of an Object.Note that a property can be Keyed by a String or Symbol.A property is enumerable when its enumerable attribute is set to true.By default while creating an Object using literal syntax,the enumerable attribute is set true initially.
Let's see an example,
`
object.propertyName = value;
or by
let obj = {
propertyName: value,
...
};
`
in both the cases the Object enumerable property is set to true by default.
Now let's create a for..loop and iterate over an Object.
`for(const propertyName in object) {
// ...
}
`
`var person = {
firstName: 'John',
lastName: 'Doe',
ssn: '299-24-2351'
};
for(var prop in person) {
console.log(prop + ':' + person[prop]);
}
`
OUTPUT:
`firstName:John
lastName:Doe
ssn:299-24-2351
`
In this example, we used the for...in loop to iterate over the properties of the person object. We accessed the value of each property using the following syntax:
`object[property];`
The for...in loop & Inheritance
So for we have seen the iteration over a normal Object,but what if we iterate an Object that inherits the property from another Object.The for..in loop will inherit the properties that inherits from the another Object,the for..in goes up in prototype chain and iterate over enumerable properties.Let's see an example,
`var decoration = {
color: 'red'
};
var circle = Object.create(decoration);
circle.radius = 10;
for(const prop in circle) {
console.log(prop);
}
`
OUTPUT:
`radius
color
`
The circle object has its own prototype that references the decoration object. Therefore, the for...in loop displays the properties of the circle object and its prototype.
If you want to enumerate over only the own properties of an Object,you can use hasOwnProperty() method.
`for(const prop in circle) {
if(circle.hasOwnProperty(prop)) {
console.log(prop);
}
}
`
OUTPUT:
`radius
`
The for...in loop and Array
It’s good practice to not use the for...in to iterate over an array, especially when the order of the array elements is important.
Let's see an example that works flawlessly,
`const items = [10 , 20, 30];
let total = 0;
for(const item in items) {
total += items[item];
}
console.log(total); `
However we can add a new property to the Array type in the Javascript,
`Array.prototype.foo = 100;`
Hence, the for...in will not work correctly. For example:
`// somewhere else
Array.prototype.foo = 100;
const items = [10, 20, 30];
let total = 0;
for (var prop in items) {
console.log({ prop, value: items[prop] });
total += items[prop];
}
console.log(total);`
OUTPUT:
`{ prop: '0', value: 10 }
{ prop: '1', value: 20 }
{ prop: '2', value: 30 }
{ prop: 'foo', value: 100 }
160`
Look at this,we have got the wrong once as it has inherites a property from it's prototype.
Let's see another example,
`var arr = [];
// set the third element to 3, other elements are `undefined`
arr[2] = 3;
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}`
OUTPUT:
`undefined
undefined
3`
However, the for...in loop ignores the first two elements:
`for (const key in arr) {
console.log(arr[key]);
}
`
OUTPUT:
`3
`
Yes,that's all for now.If you are reading this Please give me suggestions or comments to motivate me do more and better on upcoming posts.
Many Thanks for Your Time,
Sam