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?

Answer 1

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

Answer 2

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.