JS: how to create optionally chainable methods

Question

JS newbie question here:

Let's say I have some simple methods for string manipulation, like these silly examples:

var prepend = function(str) {
  return 'foo ' + str
};

var exclaim = function(str) {
  return str + '!'
}

Now, I can use these like so:

var string = prepend('bar'); // 'foo bar'
string = exclaim(string); // 'foo bar!'

However, I think it would be really neat if I could also, optionally, make these methods chainable, so I could also do something like:

var string = "foo"
string.prepend().exclaim()

... and I'd still get "foo bar!" as my result.

It would be even better if I could also pass optional args into this chain, like:

var exclaim = function(string,char="!") {
  return string + char
};

So, my questions are:

1. So basic, but am I describing this correctly? What do you call a method that can be chained like this? And, what do you call the return of the previous method in the chain, the thing that this next method will operate on?

2. How do you set a variable to be either the return of the previous method in the chain, or else provided as an argument?

Thanks!

Answer 1

If you want to chain them, then you'll have to add these methods to the string prototype:

String.prototype.prepend = function() {
  return 'foo ' + this
};

String.prototype.exclaim = function() {
  return this + '!'
}

var s = "".prepend().exclaim();
console.log(s);

DEMO

---

WRT optional parameters, you can take advantage of the fact that in JavaScript, you can call a method without passing values for some of the parameters. Those un-passed parameters will show up as undefined in the function. Since null implicitly converts to undefined, that's often handled by checking those parameters for null

var exclaim = function(str, ch) {
  if (ch == null){
      ch = '!';
  }
  return string + ch
};

You'll often also see something like this:

var exclaim = function(str, ch) {
  ch = ch || '!';
  return string + ch
};

That's similar, but will overwrite any of the 6 "falsy" values: null, undefined, NaN, 0, false and '' (empty string). So if you were to do that, and try to pass an empty string in for ch, it would be overwritten.

Answer 2

You could do this:

 var string = exclaim(prepend('bar'));

Or you could extend the String object so that you can use the .prepend() and .exclaim() syntax:

  String.prototype.prepend = function() {
       return 'foo ' + this
  };

  String.prototype.exclaim = function() {
      return this + '!'
  }

Answer 3

To avail chain-able method you should return an instance of the object that contains that method. In most case you'd return this.

See this MyString class for example

function MyString(s){
   this.str = s;
}
MyString.prototype.lower=function(){
   this.str = this.str.toLowerCase();
   return this;
}
MyString.prototype.upper=function(){
   this.str = this.str.toUpperCase();
   return this;
}
MyString.prototype.last=function(x){
   return this.str.substr(-x);
}
MyString.prototype.first=function(x){
   return this.str.substr(0,x);
}

MyString.prototype.get=function(){
   return this.str;
}


var ms = new MyString("Hello");
var s  = ms.lower().first(2); // s = 'he';