How Does Function Chaining Work in JQuery?
JavaScript is all about manipulating the DOM and, to this end, it needs to access the elements in the first place. Finding elements in Dom is not a cheap operation. Therefore there is a basic rule here which says: "Keep DOM access to a minimum."(1)
The best practice to access a DOM element in JavaScript is to save the element reference in a variable. In this way, JavaScript won't search the whole DOM tree to find the element on every attempt to manipulate it.
Bad:
Document.getElementById("user-image").height = 200px;
Document.getElementById("user-image").width = 200px;
Good:
const userImage = Document.getElementById("user-image");
userImage.height = 200px;
userImage.width = 200px;
Now, there is another drawback when manipulating DOM elements. Whenever we change anything in the DOM tree, the browser syncs the UI accordingly.
"This can sometimes consume a lot of CPU & memory because changing the layout of one element may affect the layout of many other elements on the screen."(2)
In the above example, the browser have to recalculate and repaint the adjacent elements twice: once with resetting the width and once with resetting the height.
Function chaining in JQuery is a solution for this issue.
Function Chaining
"Function chaining is a pattern in JavaScript where multiple functions are called on the same object consecutively. Using the same object reference, multiple functions can be invoked. It increases the readability of the code and means less redundancy."(3)
Using function chaining in JQuery saves us from attaching the element reference multiple times for each function call. In the example above, we can rewrite our code as follows to make it more efficient and more concise at the same time:
var userImage = $("#user-image")
userImage.height("200px").width("200px")
But how does function chaining work? Normally when we change a specific property of an element, we only reset the value of a property in an object.
In function chaining the same job is done through a function which returns the object reference which can be used by the next function. Therefore, the browser doesn't need to access the element twice. The following example shows the same effect and gives us a better understanding of how this patterns works under the hood.
var Element = {
height: 0;
width: 0;
height: function(height) {
this.height = height;
return this;
}
width: function(width) {
this.width = width;
return width;
}
}
Element.height(100).width(100);
When we invoke height(100) on Element, it returns the same context(Element) to invoke the next function (here width) on it. In so doing, the browser will consume less memory and CPU to apply the changes on the same object.
Conclusion
Making a program work is one thing, making it work efficiently is another thing. Using best practices and effective patterns is not an option in software development world; it is a must. This is what makes our products more enjoyable and easier to use for the users. When working with DOM, applying best practices such as function chaining has a huge impact on the whole application performance which leads to more user satisfaction.
Sources