How to make chainable function in JavaScript?

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 =; // Prints 'NOTEPAD++'.

How would I do this?



Sure, the trick is to return the object once you're done modifying it: = function() {
    return this + "+";

var str = "Notepad";

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.


If I remember correctly, you can use "this" as a context of a function (object it belongs to) and return it to make the function chainable. In other words:

var obj = 
    f1: function() { something...; return this;},
    f2: function() { something...; return this;}

then you can chain the calls like obj.f1().f2()

Keep in mind, you won't be able to achieve what you are expecting by calling obj.f1().toUpperCase() - it will execute f1(), return "this" and will try to call obj.toUpperCase().


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.