JS Prototype methods act differently while accessing in a loop

Question

I am extending the array object with a new method called custommethod as follows and looping through the values inside an array. However, the looping through the indices also prints the name of the property which is extended via Array.prototype.<method>.

Array.prototype.custommethod = function() {
    console.log("Hello from Custom Method");
}

Object.defineProperty(Array.prototype, "anothercustommethod", {
    value: function() {
        console.log("Hello from Another Custom Method");
    }
});

Loop through the array

> x = [1,2]
[ 1, 2 ]

> for (i in x) { console.log(i); }
0
1
custommethod

Why doesn't the anothercustommethod get printed in this loop?
Is using the Object.defineProperty() a safer way to create Array.prototype?

I am curious as to how the for loop in javascript actually works. Does it use Object.keys() internally? If so how does it print custommethod which is inside __proto__ property but not anothercustommethod which is also inside __proto__ property?

This is one reason why you should avoid using for..in on arrays. — Rajesh Dixit
– Rajesh Dixit, Commented Feb 6, 2018 at 5:37

Suren Srapyan · Accepted Answer · 2018-02-06 05:36:24Z

5

Why doesn't the anothercustommethod get printed in this loop?

for in iterates over those properties, which data descriptor enumerable is set to true.

In the Documentation

enumerable true if and only if this property shows up during enumeration of the properties on the corresponding object. Defaults to false.

When using defineProperty, you can also pass an extra property - enumerable. By default it is set to false.

Array.prototype.custommethod = function() {
    console.log("Hello from Custom Method");
}

Object.defineProperty(Array.prototype, "anothercustommethod", {
    value: function() {
        console.log("Hello from Another Custom Method");
    },
    enumerable: true
});

const x = [1,2]
for (i in x) { console.log(i); }

Is using the Object.defineProperty() a safer way to create Array.prototype?

There is nothing about safe. Try to change the build in prototypes rarely

edited Feb 6, 2018 at 5:36

answered Feb 6, 2018 at 5:25

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Sudheesh Singanamalla Over a year ago

Thanks Suren, Can something similar to enumerable: true/false also be done with Array.prototype.method without using Object.defineProperty()?

AL-zami Over a year ago

great ! i was about to write the same thing

Suren Srapyan Over a year ago

You need to define via defineProperty

Sudheesh Singanamalla Over a year ago

So for the 2nd part of the question I asked, It is safer to use defineProperty() while trying to create prototype methods? Also I am just curious, why is it by default enumerable:true, writable: true, configurable: true when doing Array.prototype and not the same in Object.defineProperty()?

Suren Srapyan Over a year ago

Generally in most cases you don't need to have restrictions on the properties, so why by default it is set to true. Using defineProperty by default set the writable property to false and you can't change its value. Consider how difficult it will be if you will for each property set writable to true.

|

xianshenglu · Accepted Answer · 2018-02-06 05:38:17Z

you can check the property by this API:

Object.getOwnPropertyDescriptor(Array.prototype,'custommethod');//{value: ƒ, writable: true, enumerable: true, configurable: true}
Object.getOwnPropertyDescriptor(Array.prototype,'anothercustommethod');//{value: ƒ, writable: false, enumerable: false, configurable: false}

see? the first one got:enumerable: true,the second one got:enumerable: false,

also other values is different too that is because the default settings is different when set by different API

acutally ,want to be more safe,you can use this API:

Object.getOwnPropertyNames

Object.getOwnPropertyNames(Array.prototype).filter(v=>v.endsWith('custommethod'));//["custommethod", "anothercustommethod"]

if there is symbol,you still need to

Object.getOwnPropertySymbols(Array.prototype);//[Symbol(Symbol.iterator), Symbol(Symbol.unscopables)]

Object.keys works like for in,they won't traverse property whose enumerable is false;

when you try to traverse property with other API,should think about these things

Collectives™ on Stack Overflow

JS Prototype methods act differently while accessing in a loop

Loop through the array

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Loop through the array

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related