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().

Here’s a way to do it without messing with String.prototype, by returning an object similar to a string, with an additional method foo(). However, there are some downsides to this approach related to it not returning an actual string.

// Returns an object similar to a string, with an additional method foo()
function foo(str) {
  return Object.assign(`${str ?? this}+`, {

var str = "Notepad";
  "EXAMPLE - foo(str).foo().toUpperCase():",  


console.log("Some issues with this solution:");
console.log("typeof foo(str):", typeof foo(str));
console.log("foo(str).foo():", foo(str).foo());

  "You may need to use toString() - foo(str).foo().toString():",
.as-console-wrapper { min-height: 100% }

You can also achieve this using class

enter image description here

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .
Read More:   How can I call method from onPress on Alert function [React-Native]

Similar Posts