Why is it frowned upon to modify JavaScript object's prototypes?

Question

I've come across a few comments here and there about how it's frowned upon to modify a JavaScript object's prototype? I personally don't see how it could be a problem. For instance extending the Array object to have map and include methods or to create more robust Date methods?

Answer 1

The problem is that prototype can be modified in several places. For example one library will add map method to Array's prototype and your own code will add the same but with another purpose. So one implementation will be broken.

Answer 2

Mostly because of namespace collisions. I know the Prototype framework has had many problems with keeping their names different from the ones included natively.

There are two major methods of providing utilities to people..

Prototyping

Adding a function to an Object's prototype. MooTools and Prototype do this.

Advantages:

1. Super easy access.

Disadvantages:

1. Can use a lot of system memory. While modern browsers just fetch an instance of the property from the constructor, some older browsers store a separate instance of each property for each instance of the constructor.
2. Not necessarily always available.

What I mean by "not available" is this:

Imagine you have a NodeList from document.getElementsByTagName and you want to iterate through them. You can't do..

document.getElementsByTagName('p').map(function () { ... });

..because it's a NodeList, not an Array. The above will give you an error something like: Uncaught TypeError: [object NodeList] doesn't have method 'map'.

I should note that there are very simple ways to convert NodeList's and other Array-like Objects into real arrays.

Collecting

Creating a brand new global variable and stock piling utilities on it. jQuery and Dojo do this.

Advantages:

1. Always there.
2. Low memory usage.

Disadvantages:

1. Not placed quite as nicely.
2. Can feel awkward to use at times.

With this method you still couldn't do..

document.getElementsByTagName('p').map(function () { ... });

..but you could do..

jQuery.map(document.getElementsByTagName('p'), function () { ... });

..but as pointed out by Matt, in usual use, you would do the above with..

jQuery('p').map(function () { ... });

Which is better?

Ultimately, it's up to you. If you're OK with the risk of being overwritten/overwriting, then I would highly recommend prototyping. It's the style I prefer and I feel that the risks are worth the results. If you're not as sure about it as me, then collecting is a fine style too. They both have advantages and disadvantages but all and all, they usually produce the same end result.