Javascript: How to create chainable functions

What is the need to chain a function?

Functions are the first-class citizens in javascript. Every method or pattern implementation is done through functions. Many times in programming, we face a situation where we need to call a series of functions one after the other, passing the value from one step to the next step. Normally, handling such a sequence of function calls looks something like this:

In both cases, we are trying to pass the output of the innermost function to its immediate outer function. While this works well for three functions, imagine a scenario where there are multiple function calls to be repeated this way.

  1. Pattern-one would lead to callback hell, resulting in unreadable code.
  2. Pattern-two would lead to unnecessary variables stored in memory, leading to a slow, unresponsive website.

The solution to these two problems is writing methods that can be chained to the next method in the sequence. If you have used any of the built-in array methods in javascript, you have surely come across chainable functions:

Chainable functions in javascript is a design paradigm in which the output of one function is sent as the input to another. In the above code, the arr is sent to the filter function, this filters out elements with value more than 50. The filtered shorter array values are then passed to the map function, which doubles each value and returns. Let's see how the chainable functions can be created.

This — makes chainable functions possible

In javascript, the keyword this acts as a reference to the object which is being executed in the current context. The next piece of the article assumes that you are familiar with this and how it works in javascript. To understand more, refer to Javascript understanding this

Consider the following code:

As you can see, the above functions can be chained together. However, we still aren’t passing values from one function to another. To do this, we should add the functions under a single class, and manipulate the instance properties. Since any given instance will have a unique value, and the value can be accessed using this inside the methods belonging to the instance, we make use of the instance properties for function chaining.

Consider the following class:

The main idea behind chaining functions is to store the value as a property inside this and any changes should be applied to the stored value. The value stored is passed to the functions that are chained. Writing chainable methods to operate on similar types of objects can help improve the readability and memory in javascript programming.

CODER | BLOGGER | ARTIST | GHOST

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store