How to define method in javascript on Array.prototype and Object.prototype so that it doesn't appear in for in loop

Question

I want to define helper methods on the Array.prototype and Object.prototype. My current plan is to do something like:

Array.prototype.find = function(testFun) {
   // code to find element in array
};

So that I can do this:

var arr = [1, 2, 3];
var found = arr.find(function(el) { return el > 2; });

It works fine but if I loop over the array in a for in loop the methods appear as values:

for (var prop in arr) { console.log(prop); }
// prints out:
// 1
// 2
// 3
// find

This will screw up anybody else relying on the for in to just show values (especially on Objects). The later versions of javascript have .map and .filter functions built into arrays but those don't show up on for in loops. How can I create more methods like that which won't show up in a for in loop?

Gromwell

That is just the reason for not using for-in loops on arrays! – Neocene

Don't modify objects you don't own. – Dianadiandra

Answer 1

It's quite easy: Don't use for-in loops with Arrays. Blame everybody else who does so - here is a nice snippet to tell them during development.

Of course, if one does an enumeration in a generic function and doesn't know whether he gets an array, a plain object or an object with a custom prototype, you can use hasOwnProperty like this:

for (var prop in anyObj )
    if (Object.prototype.hasOwnProperty.call(anyObj, prop))
        // do something

Notice the explicit use of Object.prototype to get the function - there might be objects that overwrite it (especially in data-maps, the value might not even be a function), objects that do not support it or objects that do not inherit from Object.prototype at all. See also here.

Yet, only a script author who is aware of the problem would filter all his for-in-loops - and some only do it because it gets recommended - and does it mostly wrong, he should have used a for-loop array iteration instead. But our problem are those authors who do not know of it.

An interesting, but Mozilla-only approach would be overwriting the behavior of enumerations on arrays via __iterate__, as demonstrated here.

Fortunately, EcmaScript 5.1 allows us setting properties to be non-enumerable. Of course, this is not supported in older browsers, but why bother? We'd need to use es5-shims anyway for all the cool higher-order array stuff :-) Use defineProperty like this:

Object.defineProperty(Array.prototype, "find", {
    enumerable: false,
    writable: true,
    value: function(testFun) {
        // code to find element in array
    }
});

Neocene

I like putting that long hasOwnProperty in a helper function. Having a shorthand like hop(anyObj, prop) makes me less likely to use one of the shorter but suboptimal alternatives that you mentioned. – Tver

Sure, you can define var hop = Function.prototype.call.bind(Object.prototype.hasOwnProperty), but as the average programmer should never need it I've not mentioned this. Those libraries which provide highly generic functions use it internally, of course. – Neocene

Answer 2

Depending on your restrictions:

// In EcmaScript 5 specs and browsers that support it you can use the Object.defineProperty
// to make it not enumerable set the enumerable property to false
Object.defineProperty(Array.prototype, 'find', {
    enumerable: false,  // this will make it not iterable
    get: function(testFun) {
       // code to find element in array
    };
});

Read more about Object.defineProperty here https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty

Lyman

No, you don't want to define a getter function for this prototype method. Have a look at my answer... – Neocene

You can't trust anyone else using your code will do the hasOwnProperty check, so this is a safe way. – Voltameter

Answer 3

The above answers miss a point:

enumerable ... Defaults to false. (mdn)

So simply using Object.defineProperty(Array.prototype, 'myFunc' myFunc) instead of Array.prototype.myFunc = myFunc will resolve the issue.

Fine

Answer 4

It's because have to check for hasOwnProperty:

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

Now this logs 1, 2, 3.

Finding

bergi was trying to say that this code breaks if someone adds a "hasOwnProperty" property to arr or its prototype. – Tver

Really bad advice – Eboni