Method chaining in JavaScript

JavaScript | Sat Dec 16 2023 | 2 min read

Problem statement

Let's assume there is a scenario as if we have to write a function or class in JavaScript that should contain fuctions to format number, date etc. in different formats and we need to design our code in a way that multiple formatters may need to apply to a single number.

In the code sample below if we have to apply fixedLengthNumber and roudOff both on a single number than we have to apply it twice basically format with fixedLengthNumber, take its output in a variable and apply roudOff there after.

const formatterWithoutChaining = {
    fixedLengthNumber:function(number, places) {
       return Number(number).toFixed(places);
    },
    roudOff: function(number, places) {
        return +(Math.round(number + "e+" + places)  + "e-" + places);
    }

}


console.log(formatterWithoutChaining.roudOff(formatterWithoutChaining.fixedLengthNumber(20000.367222, 2), 2))
//Output
20000.37

Solution

Method chaining is a pattern of calling a method on another method of the same object.
JavaScript this keyword refers to the current object in which it is called so if we return this from chained functions, we are actually passing entire object's context as input to next function.

const formatterWithChaining = {
  result: 0,
  fixedLengthNumber: function (number, places) {
    this.result = Number(number).toFixed(places);
    return this;
  },
  roudOff: function (places) {
    this.result = +(
      Math.round(this.result.toString() + "e+" + places) +
      "e-" +
      places
    );
    return this;
  },
};

console.log(
  formatterWithChaining.fixedLengthNumber(230.47679, 3).roudOff(2).result
);

//Output
230.48

We can implement method chaining with class or function as well.

class Formatter {
    result = 0;
    _num = 0;
    constructor(num) {
      this._num = num;
    }
    fixedLengthNumber(places) {
      this.result = Number(this._num).toFixed(places);
      //console.log('ddd', this.result);
      return this;
    }
    roudOff(places) {
      this.result = +(
        Math.round(this.result.toString() + "e+" + places) +
        "e-" +
        places
      );
      //console.log('ccc', this.result);
      return this;
    }
  }
const result = new Formatter(2984.9637);
console.log(result.fixedLengthNumber(3).roudOff(2).result);

//Output
2984.96