Only custom object properties are shown during for-in loop

Question

Array.prototype.myFeature = function() {};

var arr = ['some', 'items'];

for (var prop in arr) {
  console.log(prop);
}

The output for that code will be: 0, 1, myFeature.

The question is: why only custom added function to the Array prototype is outputed, instead of all the function that exists in prototype?

Answer 1

This is because built-in array methods are defined to be non-enumerable, while properties created by ordinary assignment are enumerable. Internally, properties have behavioral features specified by their associated property descriptor which is defined at property-creation time. One feature supplied in this way is the property's enumerability.

Compare

> Object.getOwnPropertyDescriptor(Array.prototype, "join")
{value: ƒ, writable: true, enumerable: false, configurable: true}

and

> Object.getOwnPropertyDescriptor(Array.prototype, "myFeature")
{value: ƒ, writable: true, enumerable: true, configurable: true}

The first property descriptor object has enumerable: false while the second has enumerable: true. Non-enumerable properties are not enumerated in for-in loops.

You can define your own non-enumerable property with Object.defineProperty:

Object.defineProperty(Array.prototype, "myFeature", { value: function() {}, enumerable: false });

Answer 2

Per the docs:

The for...in statement iterates over the enumerable properties of an object. For each distinct property, statements can be executed.

Seems, only these three properties are enumerable. So for...in only iterates over them.