Javascript: hiding prototype methods in for loop?

Question

So lets say I've added some prototype methods to the Array class:



Array.prototype.containsKey = function(obj) {
    for(var key in this)
        if (key == obj) return true;
    return false;
}

Array.prototype.containsValue = function(obj) {
    for(var key in this)
        if (this[key] == obj) return true;
    return false;
}

then I create an associative array and attempt to loop through it's keys:



var arr = new Array();
arr['One'] = 1;
arr['Two'] = 2;
arr['Three'] = 3;

for(var key in arr)
   alert(key);

this returns five items:

  -One
  -Two
  -Three
  -containsKey
  -containsValue

but I want (expect?) only three. Am I approaching this wrong? is there a way to "hide" the prototype methods? or should I be doing something differently?

As JS has evolved, we now have includes. Also, creating an array for the purpose of storing keys like "One" is not useful. Just use a plain object and the in operator. Object.keys and Object.values can help in other scenarios. — trincot
– trincot, Commented Feb 22 at 7:24

abbr · Accepted Answer · 2016-10-02 04:27:15Z

64

You can achieve desired outcome from the other end by making the prototype methods not enumerable:

Object.defineProperty(Array.prototype, "containsKey", {
  enumerable: false,
  value: function(obj) {
      for(var key in this)
        if (key == obj) return true;
      return false;
    }
});

This usually works better if you have control over method definitions, and in particular if you have no control over how your code will be called by other people, which is a common assumption in library code development.

edited Oct 2, 2016 at 4:27

answered Apr 10, 2014 at 6:46

abbr

5,6117 gold badges33 silver badges52 bronze badges

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

5 Comments

Aurimas Over a year ago

This is particularly useful when you have no control over the code that is looping.

Camilo Sanchez Over a year ago

unfortunately defineProperty only works for DOM elements for IE8 kangax.github.io/compat-table/es5/#define-property-ie-note

ZolaKt Over a year ago

This is so much more elegant then checking hasOwnProperty in every loop. For older browsers you can roll your own implementation, like this one for example: github.com/inexorabletash/polyfill/blob/master/es5.js#L71

rupps Over a year ago

yes this is the way.. but more often than not, browsers lacking basic Array methods also lack Object.defineProperty, so it's a race condition ;)

Marecky Over a year ago

This is useful if one wants to apply jQuery's $.param method on custom object with methods. Naive implemented add function github.com/jquery/jquery/blob/1.12-stable/src/serialize.js#L58 just runs ones methods blindly, and it causes Uncaught TypeError: Cannot read property of undefined, This solution is also elegant!

Kirtan · Accepted Answer · 2009-07-10 04:29:55Z

60

You can use JavaScript's hasOwnProperty method to achieve this in the loop, like this:

for(var key in arr) {
    if (arr.hasOwnProperty(key)) {
        ...
    }
}

Reference: This YUI blog article.

answered Jul 10, 2009 at 4:29

Kirtan

21.7k6 gold badges50 silver badges61 bronze badges

2 Comments

Moss Over a year ago

Ironicly I ran into this problem by trying to create a shorter version of hasOwnProperty Object.prototype.has = Object.prototype.hasOwnProperty

Thibaut Over a year ago

Apparently calling hasOwnProperty directly on the object is considered unsafe (reference). The safe way would be Object.prototype.hasOwnProperty.call(foo, "bar")

rezzif · Accepted Answer · 2009-07-10 04:56:45Z

4

Javascript doesn't support associative arrays the way you think they do. http://ajaxian.com/archives/javascript-associative-arrays-considered-harmful

for (var i in .. gets all of the properties of an object (an array is just another object) which is why you're seeing the other objects you've prototyped to it.

As the article suggests you should use an object:


var assoc = {'One' : 1, 'Two' : 2};
assoc['Three'] = 3;

for(var key in assoc)
   alert(key+' => '+assoc[key]);

answered Jul 10, 2009 at 4:56

rezzif

4602 silver badges10 bronze badges

Comments

user19302 · Accepted Answer · 2009-07-10 04:30:24Z

3

you could do this:

for(var key in arr)
{
   if (typeof(arr[key]) == "function")
      continue;
   alert(key);
}

But that's a shoddy workaround

answered Jul 10, 2009 at 4:30

user19302

Comments

Clifford Fajardo · Accepted Answer · 2018-03-22 15:03:42Z

1

Method 1: use Object.keys (which doesn't return prototype properties) & loop

Object.keys(arr); // ['One', 'Two', 'Three']
Object.keys(arr).forEach(key => console.log(key))

Method 2: hasOwnProperty inside a for-loop.

 for(var key in arr) {
   if (arr.hasOwnProperty(key)) {
     ...
   }
 }

answered Mar 22, 2018 at 15:03

Clifford Fajardo

1,4572 gold badges22 silver badges30 bronze badges

Comments

hashem yousefi · Accepted Answer · 2022-09-12 05:46:38Z

1

You can hide methods that added to prototype from for-in loops like this:

Object.defineProperty(Array.prototype, "containsKey", { enumerable: false });

Just after you add method. where the "containsKey" is your added method.

answered Sep 12, 2022 at 5:46

hashem yousefi

614 bronze badges

Comments

Duncan Beevers · Accepted Answer · 2009-07-10 05:15:37Z

0

For high-performance iteration over JavaScript arrays, use either a for or while loop. Nicholas Zakas discusses the most-performant options for iterating over arrays in his Tech Talk Speed Up Your JavaScript.

Your best bet is probably something like this:

for (var i = collection.length - 1; i >= 0; i--) {
  if (obj == collection[i]) return true;
}

This approach will be peform best for a few reasons:

Only a single local variable is allocated
The collection's length property is only accessed once, at the initialization of the loop
Each iteration, a local is compared to a constant (i >= 0) instead of to another variable

answered Jul 10, 2009 at 5:15

Duncan Beevers

1,82011 silver badges17 bronze badges

2 Comments

rezzif Over a year ago

You can't iterate like that given the way he has used the array as he hasn't used numbers as the keys so collection[1] won't exist when he has called it collection['one']

user9016207 Over a year ago

This goes backwards, which v8 can not optimize. You should always iterate the right way, forwards.

Collectives™ on Stack Overflow

Javascript: hiding prototype methods in for loop?

7 Answers 7

5 Comments

2 Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

5 Comments

2 Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related