I recently ran into a problem while trying to add the prototype.js library to one of my existing projects.

It turned out the issue was to do with for…in loops and Prototype.js extending the native objects with new properties.

Now for…in loops allow you to enumerate over an object, they kind of emulate for…each loops that you get in other languages like PHP.

Now the problem lies in that JavaScript has a major flaw, and it is that the for…in loops enumerate over not only the keys in your object but also the new prototyped methods.

For example:

var arr = new Array();
arr['name'] = 'Cameron'
arr['age'] = '28';

for(key in arr) {
alert(key + ': ' + arr[key]);
}

will output:

name: Cameron
age: 28

Adding the prototype.js library breaks the above example and causes the for…in loop to output the following:

name: Cameron
age: 28
each: function(iterator, context) {
    var index = 0;
    try {
      this._each(function(value) {
        iterator.call(context, value, index++);
      });
    } catch (e) {
      if (e != $break) throw e;
    }
    return this;
  }
eachSlice: function(number, iterator, context) {
    var index = -number, slices = [], array = this.toArray();
    if (number < 1) return array;
    while ((index += number) < array.length)
      slices.push(array.slice(index, index+number));
    return slices.collect(iterator, context);
  }
...

The above example output is shorted, when I ran the test it returned an additional 44 functions.

Obveously this is going to confuse any program you have that uses for…in loops.

So what’s the solution?

The following example fixes the problem:

var arr = new Array();
arr['name'] = 'Cameron'
arr['age'] = '28';

for(key in arr) {
if(arr.hasOwnProperty(key)) {
alert(key + ': ' + arr[key]);
}
}

In the above example we’ve added an IF statement that calls the hasOwnProperty method of the object we are enumerating passing the key as the first parameter. This method returns true if the object has the property specified and does not include properties that have been inherited through the prototype chain.

This method works in IE 6+, Safari 3.1+, Firefox 2+ and Opera 9.5.

So what about older browsers?

You can use the following almost as good method:

for(key in arr) {
if(typeof arr[key] !== 'function') {
...
}
}

Conculsion

As annoying as this is, if you are going to use for…in loops and prototype.js you will need to add an extra IF statements to filter out the results. I want to make it quite clear that this is not an issue with Prototype.js but more an issue with the JavaScript language.