Javascript Function Chaining. How jQuery ruled the Web.

Senior Javascript developers will still remember when jQuery ruled supreme. jQuery has been with us since 2006. Reaching peak popularity in the Web 2.0 Era of 2011–2014. Today, even if it’s popularity declined, jQuery is still comprising a large part of the web.

But what made jQuery so good?

jQuery has brought a revolution to the web. One of the more interesting programming patterns it used was functionality chaining (or function chaining). It made your code looked like magic.

It transformed code chunks like this:

var node = document.createElement("p");
var textnode = document.createTextNode("Test");

To this:


But it didn’t end there. When I first started Web Development. jQuery did magic things that left me baffled. Things like this:

animate function is empty to leave the animation for your imagination.

What’s happened here? We wrote something which looks plain and clear to everyone who reads it. No more spaghetti.

Let’s describe the code in plain English: 
Select all .myClass elements. Add a new class name to them called bird . Make them all appear. And finally apply some cool animation as soon as the user sees them.

Awesome right? The flow is very clear, and we know exactly what’s happening.

Element -> action on element -> action on element -> action on element.

If you ever tried implementing the above in plain JavaScript code, you know exactly how messy it could get. It would be spaghetti time.

That’s really cool, but how does jQuery do that?

We’ll have to understand how JavaScript works. The key here is that we can access the return variable of a function straight after the closing parenthesis of the function.

This concept allows us to write code like this:

We don’t have to cast the result of the function to a variable before using it. Here’s a weirder example with a function returning an array.

How it may be related to chaining your might ask? Well, because ‘Apple’ is a string, we can chain another operation or function at the end of it.

Play with this code:,console

How might we use this in our daily code? An ‘Apple’ string is an object that contains the toUpperCase and substr methods that allows us to use the magic we above. Why not create our own unique object for our purposes?

First, here’s a mini-jquery mock we can write using this method:

Run and play with this code here:,js,output
Run and play with this code here:,js,output

This will take the .example DOM and turn it into a red 100x100 square with the text ‘hello world’ in it, run the code here.

This is a very clean way to write an object that will manipulate the DOM, especially because all the commands run top to bottom and are in simple reading order.

The only minor caveat is the constant wrap(el) return in the ‘wrap’ function. We have to do this in order to return an object that contains all the functions. This code can be optimized further (See at the end of the post), but it serves the purpose of this post.

Now let’s see another example which is not related the the DOM. We’ll create a student object with student functionality.

I have a newStudent function which receives a name and returns a default student object. The wrap function contains all the actions the student can perform like take, giveHomework, doHomework and logMyState .

Now we can tell the heart breaking story of a student named Josh using only chaining:

Play with the code:,console
Play with the code:,console

It’s top to bottom in a clear order. We give the user some homework, he tries to do them only to realize he misses a pencil to do his home work. Josh takes a ruler and some coffee, goes to do his home work again, still missing a pencil. Finally Josh takes a pencil and does this home work.

This was an explanation in how JavaScript chaining works, and how we can make it work for us.

jQuery has dropped in popularity in favor for newer frameworks like React, Angular, Inferno, Preact, and Vue. The main reason is that direct DOM manipulations are hard and rarely necessary. Despite that we can learn a great deal from jQuery.

Better Student implementation

If you are interested in implementing the above in your code, read the following.

I tried to keep the examples simple. The following pattern will run faster due to use of prototype functions ( class functions ) and is Immutable, so use it instead:

Play with the code:,console

Using external libraries is not necessary, but is helpful, especially when dealing with nested objects. Consider Immutable and/or Ramda to maintain Immutable state.

Also notice the implementation of the map function, which makes our student into a functor as well.