Javascript: prototype x defineProperty x what else

Question

I have some small but useful extra methods for JS core objects like Array:

Array.prototype.indexOfObject(property, value)

This method returns the index of an Object in a Array (of Objects) where property==value, simple and productive for me.

However, when I do enumerate any Array, the method will show up, so every time I got to do like this:

for(var i in MyArray){
  if(typeof(MyArray[i])=="typeneeded"){
    // do something
  }
}

As I know, defineProperty make a non enumerable method so it will solve my problem when all browsers do accept it. By the way, is it already safe use defineProperty? IE9 works well? Other browsers? Is there a third way of doing this?

Try [caniuse.com](http://caniuse.com/), has useful information about this sort of thing. — Waleed Khan, Oct 08 '13 at 01:42
You shouldn't be using `for...in` with an array. Use a typical `for` loop with incrementing index or `forEach` if available — Phil, Oct 08 '13 at 01:46
Using traditional for solve the issue of heaving a useless if statement. I think I like for...in, remind me other languages, but that's life... — Gustavo, Oct 08 '13 at 12:08

RobG · Answer 1 · 2013-10-08T02:09:19.827

There are a few ECMAScript compatibility matrices around: kangax's is good for ES5 only, Thomas Lahn's will tell you which features are supported in what versions of various ECMAScript implementations.

A "third way" is to use a hasOwnProperty test, which works in all browsers and is a good idea in any environment that you don't control completely:

for (var p in obj) {

  if (obj.hasOwnProperty(p)) {

    // p is an own property of obj
    // do stuff with obj[p]
  }
}

You can also use Object.keys, which only returns own properties too, but support might be less than for defineProperty.

You should also note that for..in does not necessarily return properties in any particular order and can be shown to return them in different orders in different browsers. So only use it with an Array where the order of accessing members isn't important.

PS. You can also use propertyIsEnumerable too, as it only returns true for properties on the object itself:

if (obj.propertyIsEnumerable(p)) {

This was used to accommodate a bug in early Safari, but that version shouldn't be in use any more.

Incidentally, in:

> typeof(MyArray[i])

there is no need for the brackets, typeof is an operator. Also, checking the Type of a property doesn't tell you if it's an own property of the object or not, or even if it exists (though in this case it does because it's come from for..in).

This will improve my code, but keep the structure - that I wish to break. — Gustavo, Oct 08 '13 at 12:11
@aeoril—the link is fine, the server is a little slow though. — RobG, Oct 08 '13 at 23:01
@RobG Yes, the link worked this time. On re-reading your answer, it is the best one :) — Xitalogy, Oct 08 '13 at 23:53

score 1 · Answer 2 · answered Oct 08 '13 at 06:13

You can use hasOwnproperty safely for all browsers but your question was about Object.defineProperty. If you're not worried about old browsers (IE8) then you can use this:

//you should reload when you want to change value
//or you'll get a can't redefine error
Object.defineProperty(Array.prototype,"someFn",{
  enumerable: false,
  configurable: false,
  writable: false,
  value: function(){console.log("my fn");}  
});

var a = [1,2,3,4];
for(thing in a){
  console.log(thing);//=0,1,2,3
}
a.someFn();//=my fn

If the problem is only IE8 and previous IE, maybe I will change prototype by defineProperty, it seams a "improved" way of implementing methods. I'm tired of worry with IE8... — Gustavo, Oct 08 '13 at 12:13

score 1 · Answer 3 · answered Oct 16 '13 at 17:54

1

Just use a traditional for loop, or forEach:

var i,
    ary = ['val0', 'val1', 'val2'];

Array.prototype.getElem = function (i) {
    return this[i];
};

console.log('First way - using standard for loop:');
for (i = 0; i < ary.length; i++) {
    console.log('Element ' + i + ' has value ' + ary[i]);
}

console.log('second way - use "first order function" - "functional programming" style');
ary.forEach(function (e, i) {
    console.log('Element ' + i + ' has value ' + ary[i]);
});

console.log('getElem says: element 2 has value ' + ary.getElem(2));

FIDDLE

answered Oct 16 '13 at 17:54

Xitalogy

1,592
1
14
17

@Phill mention about other types of for looping. forEach is not always available, and traditional for is an option, yes. But I opened this thread for a "previous" solution, for when is better just change the way you did the class. But thanks for scripting the solution for us. – Gustavo Oct 16 '13 at 20:19
@GustavoPinent If you want to make your new methods non-enumerable, use defineProperty. However, when enumerating the integer-indexed array elements you should probably still use traditional for or forEach. defineProperty is also not always available. – Xitalogy Oct 16 '13 at 21:28

Javascript: prototype x defineProperty x what else

3 Answers3