Method Chaining in JavaScript
Last Updated :
15 Dec, 2023
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.
What is Method chaining?
It is a programming strategy that simplifies and embellishes your code. It is a mechanism for calling a method on another method of the same object.
JavaScript this keyword 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. This makes method chaining possible in JavaScript.
Example 1: In this example, each method in Land.prototype returns this, which refers to the entire instance of that Land object. This would help in calling a method on another method of the same object.
Javascript
function Land() {
this .area = '' ;
this .status = 'for Sale' ;
}
Land.prototype.open = function () {
this .status = 'Open for Sale' ;
return this ;
}
Land.prototype.close = function () {
this .status = 'Not for Sale' ;
return this ;
}
Land.prototype.setParams = function (area) {
this .area = area;
return this ;
}
Land.prototype.doorStatus = function () {
console.log( 'The' , this .area, 'Land is' , this .status);
return this ;
}
let land = new Land();
land.setParams( "500 sq ft" )
.close()
.doorStatus()
.open()
.doorStatus();
|
Output:
The 500 sq ft Land is Not for Sale
VM1106:24 The 500 sq ft Land is Open for Sale
Example 2: In this example, we will chain the inbuilt methods of the String
Javascript
let firstName = " Rajat " ;
console.log(firstName);
let modifiedName = firstName.toUpperCase()
.trim();
console.log(modifiedName)
|
Output:
Rajat
RAJAT
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...