Home > JavaScript > Augmenting Built-in JavaScript Objects

Augmenting Built-in JavaScript Objects

JavaScript is a very powerful language that allows its developers to enhance the features provided by JavaScript itself. Simply putting if a developer wishes (s)he can introduce new methods and properties in to the built-in objects supported by JavaScript. This can be done through the prototype property of the built-in objects without much trouble.

A simple example would be extending the Array object with a method that determines whether an item is present in the Array or not. The following code will do that

 

Array.prototype.exists = function (item) {
    var i = 0,
        len = this.length,
        currentItem;
    for (; i < len; i++) {
        currentItem = this[i];
        if (currentItem === item) {
            return true; //Value exists in the array
        }
    }
    return false; //Value does not exists in the array
}

 

With the above code we have added a new method in the built-in Array object. A typical usage of the new method introduced would be something like the following

 

var arr = [1, 2, 3, 4, 5];
console.log(arr.exists(10)); //Will result in false
console.log(arr.exists(4)); //Will result in true

 

This seems to be pretty simple and better way to have the functionalities that we needs using the built-in objects. Unfortunately this may not be the right method to enhance the functionalities of an existing built-in object.

Different developers thinks differently about this option. The developers of Prototype framework thinks that this is an ideal solution and uses this in their library. The YUI Framework thinks just the opposite.

From the user point of view augmenting built-in object by a JavaScript Framework can be a confusing step. This is because the developers may not realize that the new methods/functionalities offered by the built-in object is the result of the framework in use or the default behavior of JavaScript itself. It would be really difficult to identify the enhancements done by the frameworks and the original ones supported by the language itself.

Moreover browsers come up with new versions that provide more features frequently nowadays. A missing feature today might be a built-in one the next day.

Another possibility is assume that you’ve extended the built-in objects and added lots of functionalities. The next release of browser supports all these functionalities as built-in functionalities. In this case the browsers original functionalities will be overriden by the one defined by you. In other words the most efficient and optimized code will be overriden by the custom code developed and used by the user.

Personally I don’t prefer to augment built-in objects. If I need any functionality I do it using the normal functions rather extending the built-in object. Every one has their own point of views in this matter. An example we can have a simple function that get the functionality of the above Array object augmentation.

 

function existsInArray(arr, item) {
    if (typeof arr === "object" && typeof arr.length === "number") {
        var i = 0,
            len = arr.length,
            currentItem;
        for (; i < len; i++) {
            currentItem = this[i];
            if (currentItem === item) {
                return true; //Value exists in the array
            }
        }
    }
    return false; //Value does not exists in the array
}

 

If you still want to extend a built-in object then you should check whether the object supports the method or property that you are intending to add already. Consider the following code

 

if (!Array.prototype.exists) {
    Array.prototype.exists = function (item) {
        var i = 0,
            len = this.length,
            currentItem;
        for (; i < len; i++) {
            currentItem = this[i];
            if (currentItem === item) {
                return true; //Value exists in the array
            }
        }
        return false; //Value does not exists in the array
    }
}
Advertisements
Categories: JavaScript
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: