JavaScript - Technique - Chaining - Cascading

I've seen this technique described both as chaining and cascading. The theory is simply that since all functions in JavaScript are tide to the global prototype one can chain methods on an object by letting each method return this instead of the default undefined (if no return statement is provided in a JavaScript function it does return undefined by default). Chaining / cascading can simplify code and reduce the amount of data transferred over the wire.

Usage I:

If we let each method in this simple class return this:

    var chainOnObjects = function(n){
        this.name = n;
        this.date = null;
        this.online = false;
    };

    chainOnObjects.prototype.setDate = function(){
        this.date = new Date();
        return this;
    };

    chainOnObjects.prototype.setOnline = function(){
        this.online = true;
        return this;
    };

we can access the methods on the object as follows:

    var foo = new Foo();
    foo.setDate().setOnline();

The old way would be like this (also still possible):

    var foo = new Foo();
    foo.setDate();
    foo.setOnline();

Example I:

This example illustrates the technique described in Usage I. By clicking the link an object will be created and chained methods will be used to set values on the object:

Set values on an object by chaining

Usage II:

Chaining is ideal when we want to perform the same operation several times on an object. In this example chaining is used to get an element in DOM and perform the same operation on the element but with several values.

    // Object which will get an element by id
    var Chain = function(id){
        this.element = document.getElementById(id);
    };
           
    Chain.prototype = {
        // Method for styling an element
        style:function(p,v){
            this.element.style[p] = v;
            return this;
        }
    };

    // Attach the object on the window object so we can just type $(id) anywhere we want
    var init = function(){
        window.$ = function(){
            return new Chain(arguments);
        };
    }();

It's then possible to do as follows to set style on an element:

    $(itemId).style('color','olive').
              style('backgroundColor','orange').
              style('fontSize',32);

Example II:

This example illustrates the technique described in Usage II. By clicking the link chained methods will be used to style and set an event handler on the boring text below:

Usage III:

By introducing a simple loop function in the implementation it's also possible to perform several operations on several objects:

    // Object which will get all tags by name
    var Chain = function(name){
        this.elements = document.getElementsByTagName(name);
    };

    Chain.prototype = {
        // Loop method used to apply the same method on several elements
        forEach:function(fn){
            var i = this.elements.length;
            while(i--){
                fn.call(this, this.elements[i]);
            }
            return this;
        },
        // Method for styling elements
        style:function(p,v){
            this.forEach(function(el){
                el.style[p] = v;
            });
            return this;
        }
    };

    // Attach the object on the window object so we can just type $(id) anywhere we want
    var init = function(){
        window.$ = function(){
            return new Chain(arguments);
        };
    }();

It's then possible to do as follows to set styles on ex all li elements:

    $('li').style('color','red').
            style('fontSize',32);    

Example III:

This example illustrates the technique described in Usage III. By clicking the link chained methods will be used to change the li list below:

Do something with the list below

• List item 1
• List item 2
• List item 3
• List item 4
• List item 5

Code for all examples can be found here.

Page by: Trygve Lie