Javascript Chaining Methods

Learn how to chain functionality with Javascript closures.

What is chaining?

Below is an example of chaining methods, in terms of javascript this may look familiar to jQuery

var myTemplateString = myTemplate.addH1('Every page should have a h1 tag.').addH2('a h2 tag is also important').addP('and finally a p tag….').render();

The example above is of a template builder, what this is doing is building up a html string and rendering it. The advantages of chaining is that you can write all your logic in one expression, instead of creating a lot of variables to save the steps of the process.

var addH1 = myTemplate.addH1('Every page should have a h1 tag.')

var addH2 = addH2('a h2 tag is also important')

var addH2 = addP('and finally a p tag….')

var renderedTemplate = render()

Much cleaner on one line isn’t it!

So the main trick here is to use a variable in the function to save the state, and with each function that you wish to chin make sure you return this. See the bolo example

var TemplateBuilder = function() {

    return {

        currentTemplateString: '',

        addH1: function (content) {

            this.currentTemplateString += '<h1>' + content + '</h1>'
            return this

        },

        addH2: function (content) {

            this.currentTemplateString += '<h2>' + content + '</h2>'

            return this

        },

        addP: function (content) {

            this.currentTemplateString += '<p>' + content + '</p>'
            return this

        },

        render: function () {

            return this.currentTemplateString
        }

    }

}  

Notice how each function except the render function returns this. This means that the addH1() return the TemplateBuilder which contains the function addH2 which returns etc etc

var myTemplate = TemplateBuilder()

myTemplate.addH1('Every page should have a h1 tag.').addH2('a h2 tag is also important').addP('and finally a p tag....');

if (true) {

    myTemplate.addP('this was put here because true === true')

}

document.getElementById('my-paragraph').innerHTML = myTemplate.render()