Stacking up methods in Javascript

Question

I have an object I created with this snip-it that looks like this:

  ...
  var steps = new Array();
  this.createStep = function(){steps.push(new step()); return steps[steps.length-1];}; 
  this.getSteps = function(){return steps;}; //returns Array
  this.removeStep = function(pos){steps.splice(parseInt(pos), 1);}; // integer possition zero base
  this.insertStep = function(pos){steps.splice(parseInt(pos),0, new step());};

And this works fine:

...
var newStep = wfObj.createStep();
newStep.setTitle('Step-'+i);
newStep.setStatus('New');

but this does not

var newStep = wfObj.createStep().setTitle('Step-'+i).setStatus('New');

Could someone please tell me how to fix this or even what to call it when you chain methods like this?

Your setters would need to return the object.

Dave Newton
– Dave Newton

2011-09-25 22:22:13 +00:00
Commented Sep 25, 2011 at 22:22 — Dave Newton
– Dave Newton, Commented Sep 25, 2011 at 22:22
@DaveNewton: Why don't you write that as an answer?

Ned Batchelder
– Ned Batchelder

2011-09-25 22:23:32 +00:00
Commented Sep 25, 2011 at 22:23 — Ned Batchelder
– Ned Batchelder, Commented Sep 25, 2011 at 22:23
@NedBatchelder Too short; not worth it.

Dave Newton
– Dave Newton

2011-09-25 22:33:43 +00:00
Commented Sep 25, 2011 at 22:33 — Dave Newton
– Dave Newton, Commented Sep 25, 2011 at 22:33

Ned Batchelder · Accepted Answer · 2011-09-25 22:20:38Z

6

This is called a fluent interface. The way to make it work is to have every function return this.

answered Sep 25, 2011 at 22:20

Ned Batchelder

378k77 gold badges583 silver badges675 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:13:57Z

4

As Ned said, this is sometimes called fluent interface. It's also sometimes called method chaining, as you have heard.

You probably have some code somewhere that looks like this:

this.setTitle = function(newTitle) {
    title = newTitle;
};

Change that to this:

this.setTitle = function(newTitle) {
    title = newTitle;
    return this;
};

Do the same for setStatus.

edited May 23, 2017 at 12:13

CommunityBot

11 silver badge

answered Sep 25, 2011 at 22:22

icktoofay

130k23 gold badges261 silver badges239 bronze badges

1 Comment

James Ferreira Over a year ago

Thank you everyone you're the best! Sometimes knowing what to call it can make all the difference.

Collectives™ on Stack Overflow

Stacking up methods in Javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related