Adding OOP chain methods in Javascript

Image for post
Image for post

Method chaining is very useful when you have several setter type methods in a class. This technique can be used to simplify the structure of code and to reduce number of lines in the code as well.

For an instance see Car class below

class Car {

constructor(id){
this.id = id;
}

setMake(make) {
this.make = make;
}

setModel(model) {
this.model = model
}

setFuelType(fuelType) {
this.fuelType = fuelType;
}

getCarInfo() {
return {
"id" : this.id,
"make" : this.make,
"model" : this.model,
"fuelType" : this.fuelType
};
}
}

If we need to create a new Car object with several properties. We usually write like this.

let car = new Car(233);
car.setMake("Honda");
car.setModel("Civic");
car.setFuelType("Petrol");
console.log(car.getCarInfo());

Here the setter methods are accessed seperately. Thus if we have more these setter like methods, eventually we will end up with many lines car.set.., car.set.. etc.

Now we will modifiy our Car class by adding chaining trick.

class Car {

constructor(id){
this.id = id;
}

setMake(make) {
this.make = make;
return this;
}

setModel(model) {
this.model = model
return this;
}

setFuelType(fuelType) {
this.fuelType = fuelType;
return this;
}

getCarInfo() {
return {
"id" : this.id,
"make" : this.make,
"model" : this.model,
"fuelType" : this.fuelType
};
}
}

return this statement is added to all setter methods in order to return the reference of current object reference. Thereafter we are able to use all setter methods of Car class again and again (That is why it is called method chaining).

Therefore now we can do the same thing just by using only one line.

console.log(
new Car(233)
.setMake("Honda")
.setModel("Civic")
.setFuelType("Petrol")
.getCarInfo()
);

Happy coding!!

Originally published at shalithasuranga.me on March 13, 2018.

Written by

Software Engineer at 99x | Apache PMC member | Open Source Contributor (Author of Neutralinojs) | Technical Writer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store