Using prototype to extend function in JavaScript

Functions are created to define a block of code for reusability. Often, we create functions that accepts parameters, use them to write some logic and return the desired value.

JavaScript

Take for example the following code. Functions written this way are the most commonly seen. They make use of parameters to determine the data being passed into the function.

function slugify(str) {
  return str.toLowerCase().replace(/\s+/g, "-");
}

The code above looks simple and straightforward but since JavaScript is a loosely typed language, we could run into problems with data types. If str is not a type of string, the function might result in an error. As such, we might need to even do a try { ... } catch { ... } or do a check to make sure that the str is of type string before proceeding. This would result in more work needed to be done just for a simple function.

Alternatively, we could use Typescript to solve the types problem. Let's have a look at how it is done and how effective and efficient it is.

Typescript

For those who are unfamiliar, what is Typescript? Typescript extends JavaScript by adding type safety to the code. With the above example, we can add string to our parameter str (to enforce that the parameter has to be type of string) and return value (the expected type of the value we expect). This should prevent performing any invalid operations in the function should there be the wrong type of data being passed.

Take for example the following code. Nothing significant has changed here as compared to the Javascript version, but we have not made our code slightly more resilient.

function slugify(str: string): string {
  return str.toLowerCase().replace(/\s+/g, "-");
}

With the addition of the types, developers using the function would now know that the parameter has to be strictly type of string in order to prevent any errors while using it.

No doubt, the above function now seems good and ready to use effectively.

However, for a simple function to create a slug from a string, we should be able to find a "quicker" and "safer" way to implement.

To do so, we will look at the String Prototype as one of the many prototypes in JavaScript.

Prototype

With the String Prototype, we can inherit the features from it and extend our own function. This way, we can directly call the method on our string.

The following code is the slugify method we use to extend the String prototype. With this, we can skip the type check and proceed straight to writing the logic. We eliminate the need to check if the type is string.

String.prototype.slugify = function() {
  return this.toLowerCase().replace(/s+/g, "-");
}

Note that, all we need to do is to use this instead of passing the str as a parameter.

The following code is how we call the method. It looks clean and easy to read.

"Alpha Bravo Charlie".slugify();

Similarly, the result we get should still be alpha-bravo-charlie.

Of course, in a more realistic example, our string would usually be derived some variable and it should look like the following.

const strToSlugify = "Some Text Here";

strToSlugify.slugify();

And comparing to the function with params, it will look like:

slugify(strToSlugify);

Of course, both of the implementation methods should work and return the same result. Depending on our situation, we can make use of features that are readily available, leverage them and implement code that is highly efficient and effective.

I hope this has been interesting and useful for you, and would love to hear your thoughts on this.