Chain the Functions(JS)
Tags: javascript, jquery
Published: 2020-08-06 07:02:26

##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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sjkjhv7iolxpemil4mgb.PNG)

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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ab0pyoo73jp0jom8jaqd.PNG)

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:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/16qf05jvkxshbifsgs4g.PNG)

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.