Contents hide 1) Table Of Content 2) Creating Object For Method chaining 2.1) Create Object From Another Object 2.2) Using The Object βxβ 3) Why Error? 4) Method Chaining by returning object 5) Method Chaining With Closure 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. Table Of Content Method Chaining by returning object β View Demo Method Chaining With Closure β View Demo 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. JS 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. JS 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 . JS 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. JS 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 : JS (error) 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; JS 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: JS var x = new obj(); console.log(x.add(3)); Which Will Return : Console Log 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. JS 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 }; } JS 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 JS 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 JS var x = obj(); x.add(5).subtract(2).print(); // which will return : 3 Get More Post On JavaScript Share this:TwitterFacebookRedditLinkedInWhatsAppPrintTumblr Related Tags: JavaScript, js, Method Chaining, Method Chaining in Javascript, Method Chaining In JS