Skip to content
Related Articles

Related Articles

Improve Article
Method Chaining in JavaScript
  • Difficulty Level : Hard
  • Last Updated : 31 Mar, 2021

As a good programming practice, we should write individual functions/methods for dealing with individual actions. And, writing only one method/function for all actions is a thing. However, sticking to good practice takes a toll on the readability and comprehensibility of the code, because defining a separate function for each action means that the output of a single function/method is input. This makes code comprehensibility even worse, as the function needs to be nested in reverse order. This is where method chaining comes to the rescue.

Method Chaining is a programming strategy that simplifies and embellishes your code. It is a mechanism of calling a method on another method of the same object.

this keyword in JavaScript refers to the current object in which it is called. Thus, when a method returns this, it simply returns an instance of the object in which it is returned. Since the returned value is an instance of an object, it is, therefore, possible to call another method of an object to the returned value, which is its instance. And this makes method chaining possible in JavaScript.

Example: In this example, each method in Land.prototype returns this, which refers to the entire instance of that Land object. And this would help in calling a method on another method of the same object.

Javascript






//creating a function Land()
function Land() {
this.area = '';
this.status = 'for Sale';
}
//Setting status open for sale
Land.prototype.open = function() {
this.status = 'Open for Sale';
return this;
}
//Setting status not for sale
Land.prototype.close = function() {
this.status = 'Not for Sale';
return this;
}
//Setting Parameters
Land.prototype.setParams = function(area) {
this.area = area;
return this;
}
//printing land status
Land.prototype.doorStatus = function() {
console.log('The',this.area,'Land is',this.status);
return this;
}
//creating a land object
var land = new Land();
land.setParams("500 sq ft").close().doorStatus().open().doorStatus();

Output:

The 500 sq ft Land is Not for Sale

The 500 sq ft Land is Open for Sale

Land { area: ‘500 sq ft’, status: ‘Open for Sale’ }

My Personal Notes arrow_drop_up
Recommended Articles
Page :