Enhancing Javascript’s built in types

Tweet

Javascript is often falsely derided as a simple language, devoid of the object oriented features so favoured by other modern scripting languages. People holding this opinion really need to take another look at the language, for beneath its beginner friendly interior Javascript packs some powerful language features. In addition to its support for functional programming (where functions can be passed around a script in the same way as the data structures they operate on) Javascript supports a form of OOP known as prototype-based inheritance.

The web is already awash with tutorials on object oriented Javascript, so rather than rehashing them I’m just going to demonstrate one of the neater things you can do with prototype inheritance: add new capabilities to Javascript’s built in types. The following is one of my favourite examples:

Array.prototype.indexOf = function(value) {
for (var i = 0; i < this.length; i++) {
if (this[ i] == value) {
return i;
}
}
return -1;
}

The above code adds a brand new method to the Javascript Array type called indexOf, which takes a value and returns the first index of the array containing that value, or -1 if the value isn't found in the array. By assigning a new property to the prototype of the Array class, the new property (which in this case is a function) is made available to all other array objects, even those that have already been created.

Another class that's ripe for enhancement is the String class. Here's a simple trim() function which returns a copy of the string with any leading and trailing whitespace removed:

String.prototype.trim = function() {
var match = /s*(.*?)s*/.exec(this);
return match[1];
}

There's a thread on the SitePoint forums discussing this technique in more detail. Thanks go to Octal for suggesting this as a topic for a blog entry.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://boyohazard.net Octal

    Until recently I was totally unaware of this functionality. This adds immensely to the power of Javascript and to what I thought was possible from the language. Thanks for highlighting it in your blog!

  • Jeremy Dunck

    Also, this technique can be used for applying an interop layer over a browser’s existing DOM implementation. Various libraries, such as DynAPI and NetWindows do this.

    if (!document.getElementById) {
    document.prototype.getElementById = function(id) {

    }
    }

    etc.