How to create chaining of objects in js

Question

I was asked in an interview to solve

init(1).add(2).mul(3).div(4).val();

Output it should achieve this functionality, I am more concerned about how to call in the above way

(1 + 2) * 3 / 4 = 2.25

How can we implement it using javascript? I thought of creating functions with nested function, whats the correct way?

I did

var gmap = function(num) {
this.x = num;

this.add = function(ad) {
    this.x = this.x * ad;
    return this;
}

this.del = function(de) {
   this.x = this.x + de;
   return this;
}

this.final = function() {
    return this.x;
}

}

Have a look at stackoverflow.com/search?q=%5Bjavascript%5D+fluent+interface and stackoverflow.com/search?q=%5Bjavascript%5D+method+chaining — Felix Kling
– Felix Kling, Commented Jan 23, 2019 at 0:33

TLJ · Accepted Answer · 2019-01-23 00:44:33Z

3

You can do it using class style too

class Chainable{

    init(num){
        this.total = num;
        return this;
    }

    add(num){
        this.total += num;
        return this;
    }
}

using it like so

var c = new Chainable();
c.init(1).add(1);

edited Jan 23, 2019 at 0:44

answered Jan 23, 2019 at 0:37

TLJ

4,9854 gold badges34 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Felix Kling Over a year ago

Classes must be called with new.

TLJ Over a year ago

Edited. careless on my part

Dathan Over a year ago

As it's an interview question. Using class will probably be more appreciated

Abhishek gupta Over a year ago

Why do we return this from the functions in the above solution?

TLJ Over a year ago

this refers to the object that you just accessed. you can think of this as the variable c in this example. The key idea of chaining is to mutate the state (value) of that object and then return itself (so that you can chain).

|

SReject · Accepted Answer · 2019-02-06 08:42:57Z

1

If you don't want to use an instance of a class, you can make use of closures:

function init(start) {
  // this is the starting value that will get updated with each function call
  let value = start;

  // This is the object to be returned, notice that seach return the object instance
  let self = {
      add: num => {
          value += num;
          return self;
      },
      sub: num => {
          value -= num;
          return self;
      },
      mul: num => {
          value *= num;
          return self;
      },
      div: num => {
          value /= num;
          return self;
      },
      val: () => {
          return value;
      }
  };

  return self;
}

init(1).add(2).mul(3).div(4).val(); // 2.25

Essentially, each time the init function is called a new closure-scope is created. Within this scope, new instances of any local variables that are created and only accessible within that scope.

When the init function is called, two new variable instances are created value and self that are only accessible to other 'things' created in the init function.

With each of those functions, we return the variable that contains the function-set which is how its able to chain calls.

edited Feb 6, 2019 at 8:42

answered Jan 23, 2019 at 0:50

SReject

3,9462 gold badges28 silver badges44 bronze badges

2 Comments

Abhishek gupta Over a year ago

This is what the interviewer wanted. (y)

Prid Over a year ago

Love the simple and straight-forward step-by-step explanation. That really helped with the understanding :)

Blz · Accepted Answer · 2019-01-23 01:11:54Z

0

You can do something like this using builder pattern (ES6):

function init(value) {
    this.result = value;
    return {
        add: function(addValue) {
            this.result = this.result + addValue;
            return this;
        },
        mul: function(mulValue) {
            this.result = this.result * mulValue;
            return this;
        },
        div: function(divValue) {
            this.result = this.result / divValue
            return this;
        },
        val: function() {
            return this.result;
        },
        result: this.result,
    };

}

init(1).add(2).mul(3).div(4).result

answered Jan 23, 2019 at 1:11

Blz

1931 gold badge2 silver badges7 bronze badges

Collectives™ on Stack Overflow

How to create chaining of objects in js

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related