(Part of the “12 Powerful JavaScript Tips” Series)

Prerequisites:
Understand JavaScript’s “this” With Ease
JavaScript Objects in Detail

Chaining Methods, also known as Cascading, refers to repeatedly calling one method after another on an object, in one continuous line of code. This technique abounds in jQuery and other JavaScript libraries and it is even common in some JavaScript native methods.

Writing code like this:

$("#wrapper").fadeOut().html("Welcome, Sir").fadeIn();

or this:

str.replace("k", "R").toUpperCase().substr(0,4); 

is not just pleasurable and convenient but also succinct and intelligible. It allows us to read code like a sentence, flowing gracefully across the page. It also frees us from the monotonous, blocky structures we usually construct.

  • Can a Single JavaScript Course Make You Richer?

    This Single JavaScript Course Can Get You a Bigger Salary
    (4 courses in 1—available as a single course for the first time)

    Becoming a JavaScript Expert

    Learn almost the entire JavaScript language, advanced JavaScript programming, software engineering for web programmers, and more

    • 21 comprehensive major subjects and over 200 of the most important concepts covered (plus a bonus advanced course)
    • Course covers from beginning to advanced to beyond advanced—including tooling, problem-solving, OOP, composition, software design patterns, software engineering foundation, architecting web applications, and much more
    • Over 40 exercises and more than three dozen projects and applications
      (Watching and/or reading JavaScript [JS] tutorials alone won't help you advance your programming career; you need to build real JS projects and applications as you learn. These exercises, projects, and applications are the most important part of your JS training. They will advance your JS confidence and skills and your overall programming and software engineering skills.)
    • Every concept covered in depth and with clarity (if you don't understand something, we will update the course accordingly to add more clarity)
    • Save yourself hundreds of hours and over $5,000
    • Plus: It comes with a HUGE BONUS, an entire advanced computer science JavaScript course: Discrete Math Concepts in JavaScript

    Become a JavaScript Pro and
    significantly increase your income

    Learn More and Buy the Course

    By JavascriptIsSexy: Support the website while you simultaneously save yourself thousands of dollars

We will spend the next 20 minutes learning to create expressive code using this cascading technique. To use cascading, we have to return this (the object we want subsequent methods to operate on) in each method. Let’s quickly learn the details and get back to eating, or watching YouTube videos, or reading Hacker News, or working and browsing, or working and focusing.

Let’s create all of our “chainable” code within an object, along with a local data store. Note that in a real-world app we will likely store the data in a database, but here we are just saving it in a variable.


 // The data store:
var usersData = [
    {firstName: "tommy", lastName: "MalCom", email: "test@test.com", id: 102},
    {firstName: "Peter", lastName: "breCht", email: "test2@test2.com", id: 103},
    {firstName: "RoHan", lastName: "sahu", email: "test3@test3.com", id: 104}
];


// A quick utility function that does what it says:
function titleCaseName(str) {
    return str.replace(/\w\S*/g, function (txt) {
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
}


// Our object with the chainable methods
var userController = {

    currentUser: "",

    findUser: function (userEmail) {
        var arrayLength = usersData.length, i;
        for (i = arrayLength - 1; i >= 0; i--) {
            if (usersData[i].email === userEmail) {
                this.currentUser = usersData[i];
                break;
            }
        }
        return this;
    },

    formatName: function () {
        if (this.currentUser) {
            this.currentUser.fullName = titleCaseName(this.currentUser.firstName) + " " + titleCaseName(this.currentUser.lastName);
        }
        return this;

    },

    createLayout: function () {
        if (this.currentUser) {
            this.currentUser.viewData = "

Member: " + this.currentUser.fullName + "

" + "

ID: " + this.currentUser.id + "

" + "

Email: " + this.currentUser.email + "

"; } return this; }, displayUser: function () { if (!this.currentUser) return; $(".members-wrapper").append(this.currentUser.viewData); } };

With our chainable methods defined, we can now execute our expressive code like this (just like it is done in jQuery):


 userController.findUser("test2@test2.com").formatName()
.createLayout().displayUser();

Here is the result on JSBin:
http://jsbin.com/erewat/1/edit

Why Use Cascading in JavaScript?

  • There is no need to create temporary variables to save each step of the process. For example, without chaining, our code will look like this:

    
        var aUser = userController.findUser("test@test.com");
        var formatUserName =  aUser.formatName();
        var layoutHTML =  formatUserName.createLayout();
        userController.displayUser(layoutHTML);
      
  • Now, every line of code clearly and succinctly expresses what it is doing, particularly when the name of each method is defined using verbs.
  • Our code is more maintainable because we have simple, lean, specialized methods.
  • Overall, one can easily read the “chainable” code, effortlessly type it, and comfortably understand it.

How Does Chaining Methods Work in JavaScript?

When each method returns this, the entire object that called the method is returned. The execution proceeds thus:


 // Use the userController object to execute the findUser method
 userController.findUser("test@testdd.com")

Because we are executing the findUser method on the userController object, and because the findUser method returns “this” (the object that invoked it), the entire userController object is returned and passed to the next method in the chain, since the “this” keyword in findUser holds the value of the object that invoked it.

Therefore, this occurs next:


 userController.formatName();

Similarly, the formatName method returns the userController object, so expectedly, this follows:


 userController.createLayout();

Followed by: