Photo by Roman Synkevych on Unsplash

Let Us Understand Binding Concepts Once and for All.

JavaScript binding can be done using 3 methods i.e bind(), call() and apply().

Now the question arises why 3 methods but before that why even bother learning binding concept, what is that one thing that it provides and is an absolute necessity.

One situation you might have encountered while doing your development work is having a function that does one thing and later as per new demands you want a function that does almost a similar job but on a different object.

Now you can’t just rewrite the same function and edit few variables as per need because the one we’re pretty lazy to do it and second DRY principle is waiting to bite your a*s if you won’t follow it.

Solution

In JavaScript, every function has access to its own this variable and with functions like bind, call and apply we can actually change the reference to our function’s this variable.

Which means we can write a function which takes an object’s variable and do the manipulation we needed and the same function can take on other objects and do the same manipulation without we changing anything.

How? Just by assigning reference of a function’s this variable to some other object.

Benefits of this approach will be:
1. We will be building more generic functions which can be reused multiple times so that we don’t have to repeat things again and again.

2. DRY principle will actually start giving you the respect you always wanted.

How?

Suppose we have one object of an employee has a name, city and salary as its property.

Now you want to write a function that hikes employee’s salary.

Now a new employee joins in and you want him to give him a salary hike. You already have a function in your object which does the same thing and you don’t want to write the same function which does the same thing and also you don’t want to do the same thing again and again for every new employee.

Now you being in this scenario you’ve 2 options either to write the same code once again (which you won’t) or just use the binding concept to change the reference of this to another object.

Now to use function borrowing here you can use 3 methods here. Remember the 3 names I mentioned earlier.

1. bind()
2. call()
3. apply()

Let first learn how to use call method first and then we will move towards learning the rest.

Let take it one by one and decipher what exactly is going on.

1. You have two objects employee1 and employee2. Employee1 has salaryHike function which you want to use on employee2.
2. Every function has it’s own this function and currently, salaryHike’s this refers to employee1 object and you want it to change to employee2.
3. So what we did is we used call method and passed on the object we wanted salaryHike’s this should refer to and execute the function.
4. Which increased $10,000 hike of employee2 salary.

Now apply method is very similar to that of call except for one thing apply accepts the second argument as an array while call accepts it as comma separated argument.

To clear our understanding let’s take an example.

Now bind method is different to both the methods mentioned above in a way that instead of executing the function the moment it is called (you see what I did there :P), it actually creates a clone of that function with given parameters and returns a function.

So bind enables you actually have a clone of function whose this refers to the object you wanted and you can call it anywhere as you want. This function behaves exactly like any other and you can use it as you want.

The difference between these methods can be summed up using.

How Binding came into existence?

You see every function has access to this keyword and we can always use it to do whatever operations we want to do on that context.

But what if you don’t want to use a particular object and not the global scope of this. One possible way will be to declare the function within that object so that this within that object would refer to that object OR second you can somehow change this within that function to refer to object you want.

This is how binding came into existence.

Two ways you can use binding are:

1. Have a function defined inside the object.
2. Have a function in the global scope and bind it to other objects.

Do like share and comment if you find it useful.

This is my first article would love to get feedback and feel free to correct me if I am wrong. Thanks.