Chain the Functions(JS)

Prelude:

A few days back, I was interviewing with one of the companies which provides the biggest platform for ticket bookings for Movies, Events, Sports, etc. You name them and they have it all. Being interviewed for a company that is primarily driven by user experience and that too for a Frontend Engineer position is tough and rightly so, it should be as your fingers should spell magic for the platform and it should be evident by your skills.

The Dialogue

So amidst a lot of cliches of questions which are aimed at testing your depth of knowledge of how peculiar Javascript is and how well I know it, I was asked a question, which made me realize I always wanted to know how this stuff works.

So, here I am talking about none other than chaining of methods in jquery, ok for beginners who have heard/not heard this term let me show a small example what is this all about which should clear the clouds of doubts:

So, what is happening here is in a single line of code we can achieve 3 capabilities.

• Get the DOM element with a given class name e.g $(".class")
• Add a new class to the DOM element with addClass("new")
• Remove a class from the DOM element with removeClass("old")

Well, this is the simplest form of Jquery method chaining.

I knew this but was asked to implement something like this:

Ok just when I was thinking in the lines of, well are there some methods like this in jquery.
Follow up statement was you need to write it in VanillaJS 😶

The Approach

Now, when you are in the middle of a taxing situation, you tend to be blinded from the obvious. So was I, for a moment or two.
Then what came to my rescue was the "."
I noticed add(2).add(3).add(5) and what struck my mind was Object.
Oh Yes!! this could be solved by Object and not just any object the object to which this points in general, No prize for guessing but let me unravel it for you the Window object.

The Solution

Now that I know how I can proceed with this, I needed to figure out what all needs to be done. The way I interpreted it is to break down into steps:

• Create a variable to store the result which should be attached to the window object
• Attach an add() function to the window object
• Attach a sum() function to the window object But now how can I call the add() function in a chained manner? well here comes the crème de la crème of the entire problem:

we would need to return a reference to the window object from within the add function to make it chainable

Let's have a look:

So, what's happening here?
Long Story, Short
this here points to the window object and when we return "this" from a function attached to the window we can call another method which is also attached to the window obj.
e.g add() function which is attached to the window object returns this here which is the window object and when we call
add(2).add(3).add(5).sum() we call this.add function multiple times and in the end we call sum() which returns us the final value of this.res variable.

So, this is although a very simple technique but is very handy to know for an FE.

Hope, it was some what effective to enhance your concepts, or at least worked as a refresher. If so please do show some love and share, which would encourage me to type more n spread more.