Augmenting the String object by extending its prototype – JavaScript

Every function in JavaScript has the prototype property which enables you to enhance the functionality of the current Object definition (the Class definition) either through adding properties or through methods. This stands true for both custom Objects as well as JavaScript defined Objects like Strings, Arrays.
Using prototypes to add functionality also has one more advantage and is performance optimized. Whatever methods or properties are defined using prototypes, they belong at the class level which means that all the instance of the Object (or rather the Class, in JavaScript there is no concept of Class, we say it Objects) will share the same copy of the method or property, rather than having their own individual copies.

In this post I am going to enhance the String Object which is already defined in JavaScript and has a lot of useful methods already available such as the split(), indexOf(), replace() etc and properties like length etc.

Now let’s add our new method to the String Object just to enhance its functionality. Let’s add a method that will remove the empty spaces between the words of a string value. For eg.

input value = The weather is very nice
output value = Theweatherisverynice

Defining our custom method
As you guessed it right we will be using the prototype property. Let’s try this thing out,

I have named our custom method as – removeEmptySpaces()

if(typeof(String.prototype.removeEmptySpaces) !== 'function'){ //you expect it to be a function if it is already there
    String.prototype.removeEmptySpaces = function(){                    
        return this.replace(/\s+/g,'');                   
    }
}

As you can see above, first we check if the removeEmptySpaces() method is already defined. If not (which is true in this case since we are adding out custom method. But the check is good to have if you do not want to overwrite a predefined method) then we define it inside the if block. So using the prototype property we add the custom method and from now on it is available to all the instances of the String Object. Inside the method definition we have a String.replace() method implemented. This will remove every occurrence of space between the words and will join them. I am using a regular expression inside the replace() method to match the spaces between the words. Once the match is found, it will be removed. You can also see the use of this keyword. This will represent the current instance that is calling our custom method – removeEmptySpaces(). 
You can learn more about the replace() method from w3schools.com

Putting it to test
Now let’s use our new method and see if it is actually doing the stuff that we wanted.

 var testStr = new String("The weather is very nice");   //create a new instance
 var newStr = testStr.removeEmptySpaces(); //call our custom method
 alert("New string after removing empty spaces is : " + newStr);

First we create a String Object instance – testStr and pass it a value. Then we call our custom method and store the returned value in newStr. Now if you alert the new value you can see that the empty spaces between the words have been removed. Here we have seen using our customized method with a String instance. What about String literals or constants? Well, we can use for them as well. Here is an example,

  var strConstant = "I am a String constant"; //defining our string literal
  var newStrConstant = strConstant.removeEmptySpaces(); 
  alert(newStrConstant); //alerts "IamaStringconstant"

So, we have seen how using prototypes we can add new functionality to our Objects. This was a simple example that I presented. You can customize any Objects as per your need.

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