How to make chainable function in JavaScript?

javascript function return chain chainable
daGrevis picture daGrevis · Oct 11, 2011 · Viewed 16.7k times · Source

Lets imagine function like this:

function foo(x) {
    x += '+';
    return x;
}

Usage of it would be like:

var x, y;
x = 'Notepad';
y = foo(x);
console.log(y); // Prints 'Notepad+'.

I'm looking for a way to create function that's chainable with other functions.

Imagine usage:

var x, y;
x = 'Notepad';
y = x.foo().foo().toUpperCase(); // Prints 'NOTEPAD++'.
console.log(y);

How would I do this?

Answer

Alex Turpin picture Alex Turpin · Oct 11, 2011

Sure, the trick is to return the object once you're done modifying it:

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

var str = "Notepad";
console.log(str.foo().foo().toUpperCase());

http://jsfiddle.net/Xeon06/vyFek/

To make the method available on String, I'm modifying it's prototype. Be careful not to do this on Object though, as it can cause problems when enumerating over their properties.

Related questions

Return value from nested function in Javascript

I have a function that is set up as follows function mainFunction() { function subFunction() { var str = "foo"; return str; } } var test = mainFunction(); alert(test); To my logic, that alert should return 'foo', but instead it returns undefined. What am I …

Read More
try {} without catch {} possible in JavaScript?

I have a number of functions which either return something or throw an error. In a main function, I call each of these, and would like to return the value returned by each function, or go on to the second …

Read More
Is it better to return `undefined` or `null` from a javascript function?

I have a function which I have written which basically looks like this: function getNextCard(searchTerms) { // Setup Some Variables // Do a bunch of logic to pick the next card based on termed passed through what I'll call here as 'searchTerms' …

Read More