Method chaining, also known as named parameter idiom, is a common syntax for invoking multiple method calls in object-oriented programming languages. Each method returns an object, allowing the calls to be chained together in a single statement without requiring variables to store the intermediate results.

We will learn how to jquery style chain functions ( Methods) using pure javaScript. in Jquery we can do $('.class').addClass('new').removeClass('old'). we can achive similar chaining using pure javascript.

Creating Object For Method chaining

Let’s first create an object, to start with it we going to create an object which is a function. If You know in Javascript functions are also objects.

var obj = function(){
   //...
}

Now will create a public property called i for that we can use the keyword this and assign a value 0. Also we will add a public function add() which will add a number to the i by passing an argument in add(i) function.

var obj = function(){
    this.i = 0; // public property

    this.add = function(i){ // public function add()
        this.i += i;   // Add The value
    };
    
    this.subtract = function(i){  // public function substract()
        this.i -= i; // Subtract's the value
    };
    
    this.print = function(){  // public function print()
        console.log(this.i);  // Prints the value
    };
}

Similarly, we can create another public function in the object. As you can see we just created a subtract(i) function which will subtract the value from the i and print() function will display the final value of i.

Create Object From Another Object

Now that we have an object obj which behaves like a class, we can create an object from it.

let’s create an object x form obj object, so we can use a keyword new and that will create object x

.

var x = new obj();

Using The Object ‘x’

From our new object x, we will first add and subtract the value of i by passing the argument in the function.

x.add(3); // add's 3 to i
x.subtract(2);  // subtract 2 from 1 i.e (3-2)
x.print();  // Print The Value Of i 

// result : 1

The above code works fine but this is still not a function chaining. what we exactly want to do is :

x.add(3).subtract(2).print();  // Shows error 

Why Error?

When we just console.log(x.add(3)) and the value 3 is added to i, but the function is not returning any value so it will return undefined.
If we get the undefine from the add() function we cannot apply to the subtract() function.

Method Chaining by returning object

Solution to the above example is, in the add() function if we return the entire object by adding return this;

var obj = function(){
    this.i = 0; // public property

    this.add = function(i){ // public function add()
        this.i += i;   // Add The value
        return this;   // return's entire object
    };
    ...
}

And we if we console.log the add() function it will return:

var x = new obj();
console.log(x.add(3)); 

Which Will Return :

obj {i: 3, add: ƒ, subtract: ƒ, print: ƒ} 

As you can see it return the value of i (i.e: i=3) with the subtract() function.

Now actually we can do method chaining after returning entire object from add() and subtract() function.

var obj = function(){
    this.i = 0; // public property

    this.add = function(i){ // public function add()
        this.i += i;   // Add The value
        return this;   // return's entire object
    };
    
    this.subtract = function(i){  // public function substract()
        this.i -= i;  // Subtract's the value
        return this;  // return's entire object
    };
    
    this.print = function(){  // public function print()
        return this.i ;  // Prints the value
    };
}

console.log(x.add(3).subtract(2).print());

//which will return : 1

Method Chaining With Closure

Now let’s say if we have a closure and we have to do the same thing, to create a closure we need to convert all public property to private

var obj = function(){
    var i = 0;  // closure

    var add = function(j){ // private function add()
        i += j;   // Add The value
        return this;
    };
    
    var subtract = function(j){  // private function substract()
        i -= i; // Subtract's the value
        return this;
    };
    
    var print = function(){  // private function print()
        console.log(i);  // Prints the value
    };
  return {add:add, subtract:subtract, print:print}; // Returns object of function's
}

Similarly, we have to return an object which contains the private function. i.e return {add:add, subtract:subtract, print:print};

now we don’t really want to use keyword new

 var x = obj();
x.add(5).subtract(2).print(); 

// which will return : 3

Get More Post On JavaScript