Javascript for ... in a loop with Object.prototype and Array.prototype objects

Question

I am reading MDN docs for a better understanding of javascript. This is an excerpt from there.

Object.prototype.objCustom = function() {}; Array.prototype.arrCustom = function() {}; let iterable = [3, 5, 7]; iterable.foo = 'hello'; for (let i in iterable) { console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom" } 

In the worst case, I thought it would print 0, 1, 2, "foo", "arrCustom" , but also print objCustom .

Update:
1) How can I visualize a prototype chain from iterable to Array down to Object . For example, is there an iterable.getParent or iterable.myparent method that points to a parent on it.
2) why it does not print array functions such as toString , sort , they are also on Array.prototype .
3) Is it necessary to use hasOwnProperty whenever someone adds something to the Array.prototype property.

Answer 1

This is because the for in loop is designed to iterate through all enumerated properties, both owned and inherited. You can use Object.keys() to get only their properties.

 Object.prototype.objCustom = function() {}; Array.prototype.arrCustom = function() {}; let iterable = [3, 5, 7]; iterable.foo = 'hello'; Object.keys(iterable).forEach(function(key) { console.log(key); // logs 0, 1, 2, "foo" }); 

However, it’s rather unusual to add odd properties to Array . As a rule, it is best to do everything you need.

It is also unusual to use a for in loop for in array. There are other, more efficient ways to repeat an array if you restrict it to numeric indices.

---

1) "How can I visualize the prototype chain from iterable to array up to Object . Like some iterable.getParent or iterable.myparent method that points to the parent element on it."

You can use Object.getPrototypeOf() to get the next object inherited by the object. Do this in a loop until it reaches null .

 var proto = Object.getPrototypeOf(myObj); do { console.log(proto); } while((proto = Object.getPrototypeOf(proto))); 

2) "why it does not print array functions, such as toString , sort them also on Array.prototype ."

toString() and other built-in methods are not enumerable. As I noted above, for in only achieves enumerated properties.

3) "Do I need to use hasOwnProperty whenever someone adds something to the Array.prototype property."

Do not use for in loops in arrays and you will do better. But yes, if you use for in , you will need .hasOwnProperty() boilerplate code to protect it.

You should also be aware that there is no guarantee that array performance will be achieved using for in . And it is also usually much slower than other means of repeating an array. This is especially slow with checking .hasOwnProperty() .

Answer 2

Because for-in iterates through all the properties of the object, including those inherited from the prototype. To skip inherited properties, use hasOwnProperty() .

 Object.prototype.objCustom = function() {}; Array.prototype.arrCustom = function() {}; let iterable = [3, 5, 7]; iterable.foo = 'hello'; for (let i in iterable) { if (iterable.hasOwnProperty(i)) { console.log(i); } } 

Answer 3

for..in covers all the properties that an object has, this means its own properties and inherited. This is why for..in usually followed by hasOwnProperty , like this

 Object.prototype.objCustom = function() {}; Array.prototype.arrCustom = function() {}; let iterable = [3, 5, 7]; iterable.foo = 'hello'; for (let i in iterable) { if (iterable.hasOwnProperty(i)) console.log('own', i); // logs 0, 1, 2, "foo" else console.log('not', i); // logs "arrCustom", "objCustom" (inherited) }