alt text
Benjamin Thomson
Web & UX Designer

Drink A Coffee With Me Today

Loading...
Success!
Error!

Follow On Instagram

Menu
Close

Function Chaining

The intend of the Article is to:

1. Understand Function Chaining

2. Achieve function chaining in JavaScript

 

Function Chaining is a pattern in JavaScript where we can call multiple function on a same object consecutively.

It allows multiple commands to run one after other on same element.

Function Chaining increases readibility of the code and also less redundency.


JQuery Function Chaining

Lets work on the following requirement:

1. Select a "div" in HTML

2. Change its color to Red

3. Add Height to the Element to 100px

4. Add Width to the Element

 

Conventionally this can be achieved by following way:


var selectedDiv = $("#myDiv");

selectedDiv.css('color: red')

selectedDiv.height('100px')

selectedDiv.width('100px')

But since JQuery supports Function Chaining. 

The above specified functionality can be achieved efficiently by Chaining:


var selectedDiv = $("#myDiv");

selectedDiv.css('color: red').height('100px').width('100px');

Jquery return us Object on which it executes the function back after each execution.

After executing each command the current Context is returned, hence enabling Function Chaining.


var mainDiv = $("#selectedDiv");

var selectedDiv = selectedDiv.css('color: red')

// Here the Object returned from JQuery Function is same as "mainDiv"

console(mainDiv == selectedDiv)    // returns true;

JQuery is able to achive the functionality because of following reason:

1. JQuery returns the same Object back, on which it executes once it is completed

2. The returned element from the function can then operate on another function.

 

Achieving Chaining In JavaScript

We can achieve Function Chaining by returning the current Object back from the Executing Function.

The current Executing Context is returned can be returned from the previous function and act as a Context for next function to be executed. Since the context is the same Object on which previous function was executed, we can achieve chaining functionality.

 

Lets consider following requirement and Implement Chaining on it.

1. Create a Variable "Obj" containing a variable "output".

2. Write a function to add 2 variable and assign to "output"

3. Multiply the "output" by "10"

4. Substract 20 from it and display the result.

 


var Obj = {

  result: 0,

  addNumber(a, b) { this.result = a + b; }

};

Obj.addNumber(10, 20);

console.log(Obj.result);

Once the "addNumber" function is executed, we want to chain "multiplyNumber" functionality.


// Our requirement is to chain the "multiplyNumber" function with "addNumber"

Obj.addNumber(10, 20).multiplyNumber(10);

On order to achieve the required functionality, we need to return the "Object Reference" from "addNumber"

Lets try to return "Current Object Reference" from "addNumber" function



var Obj = {

  result: 0,

  addNumber: function(a, b) {
   
    this.result = a + b; 

    return this;

  },

  multiplyNumber: function(a) {
 
    this.result = this.result * a;

    return this;

  } 

};

Obj.addNumber(10, 20).multiplyNumber(10)

console.log(Obj.result)

 

Lets just drill into what exactly the above code is doing


"addNumber" was executed on "Obj", therefore context of "addNumber" is set to "Obj"

Since the context of "addNumber" is set to "Obj", "this" keyword inside the function would point to "Obj"

Once the "addNumber" function is finished executed, it returns the current context on which it executes.


"multiplyNumber" would execute on the same context, and "this" inside "multiplyNumber" would refer to same Object.


The last 2 lines of code is Equivalent to:


var element = Obj.addNumber(10, 20)

element.multiplyNumber(10);

console.log(Obj == element) // returns true

The code, can be summarized as:

1. "addNumber" operated on "Obj" Object

2. On adding the 2 Number, it returns "this" which represent the current Context

3. This Context Represents "Obj" which is then used to invoke "multiplyNumber" function.

4. Passing the Object reference ensures that the functions executes on same Context / Object

5. Hence we can achieve "Function Chaining"

 

Now lets complete the Intended functionality:



var Obj = {

  result: 0,

  addNumber: function(a, b) {
 
    this.result = a + b;

    return this;

  },

  multiplyNumber: function(a) {
 
    this.result = this.result * a;

    return this;

  },
 
  divideNumber: function(a) {
 
    this.result = this.result / a;

    return this;

  }

}

Obj.addNumber(10, 20).multiplyNumber(10).divideNumber(10)

This is how we have achieves "Function Chaining"

 

Each of the Function in "Function Chaining" returns the current "Execution Context"

Hence enabling the chained function to Operate on the same Context and achieve Chaining

​​​​​​​

{{Count}} Comments

{{comment.user}}

{{comment.message}}

{{comment.date.substring(0, 10)}}

Leave A Comment