What are the benefits of making properties non-enumerable?
I think the main benefit is to be able to control what shows up when enumerating an object's properties, such as for in
or Object.keys()
.
MDN explains it well with Object.defineProperty
: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty
So normally, when people want to add a method to Object
, such as a polyfill for some method not supported in old browsers, they modify the .prototype
. But that makes the property enumerable and messes up what is returned in loops/keys collection (without using .hasOwnProperty
...which not everyone uses).
So instead of something like:
Object.prototype.myMethod = function () {
alert("Ahh");
};
you could use Object.defineProperty
to explicitly say to have it not be enumerable:
Object.defineProperty(Object.prototype, 'myMethod', {
value: function () {
alert("Ahh");
},
enumerable: false
});
That way, for example when you use for (var key in obj)
, "myMethod" won't be an item enumerated, and you won't have to worry about using .hasOwnProperty
. The main problem with this is that some browsers don't support it of course: http://kangax.github.com/es5-compat-table/ and that not all libraries/code use it, so you can't always rely on external libraries/code to do use correctly and all the time.
You can access a non-enumerable property at any time you want, it just won't show up when enumerating the object's properties - that's the main point.
And I do believe that all "predefined" properties of objects are non-enumerable. By that, I really only mean native properties, not necessarily inherited or created. So with your example, pop
and push
will not be enumerated over, but Array.prototype.indexOf
will be if it is created as a polyfill on an old browser that doesn't support that method...which of course, can be avoided by using Object.defineProperty
like my example above. Another example is the length
property, which is not enumerated over.
Here's an example in general: http://jsfiddle.net/aHJ3g/
The use and definition of Object.keys
is important: "Returns an array of a given object's own enumerable properties, in the same order as that provided by a for-in
loop (the difference being that a for-in
loop enumerates properties in the prototype chain as well)." - from MDN - https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/keys
Another major benefit as I see it, is that it prevents private properties of an object from polluting the public namespace.
Say you have created and published a powerful library called Cosmos
. The user fires up the Node interpreter and creates a new instance of it by calling the constructor:
var Cosmos = require('Cosmos');
var cosmos = new Cosmos('my empire');
Now the user simply types cosmos
and presses enter to see what public API it supports. Which of the two do you want the user to see?
{ name: 'my empire',
grow: [Function: grow],
addStar: [Function: addStar],
beautify: [Function: beautify],
implode: [Function: implode],
destroy: [Function: destroy] }
OR
{ _age: 25000,
_size: 35000,
_destroyed: false,
name: 'my empire',
_numStars: 200,
_init: [Function: _init],
grow: [Function: grow],
_grow: [Function: _grow],
addStar: [Function: addStar],
_checkStatus: [Function: _checkStatus],
beautify: [Function: beautify],
implode: [Function: implode],
destroy: [Function: destroy] }