Difference between apply, call and bind method in javascript

Difference between apply, call and bind method in javascript

Javascript provides various ways by which we can invoke a function. Some of the functionalities javascript provides is facilitating the use of apply, call and bind to invoke a function.

All these three are used to invoke a function with a set of parameters and a context of ‘this’ object. The difference between these types of invocation is the type of parameters supplied to the respective method.

Let us take a look in detail how these are implemented.

Using call for function invocation: 

Using ‘call’ we can invoke a function by providing object context followed by the parameters of the function to be invoked. If you have more than one parameter they should be separated by comma. The syntax is :

functionName.call(objectName, parameters of function separated by comma);

Consider the following function:

var hello = function(message)
	console.log(message+' '+this.name+ '!');

If you want to call the above function you need to provide it an object context from which it can use the value ‘this.name’. This can be done by using the ‘call’ method. Take a look at the below code:

In the above example, we are calling the function ‘hello’ twice, each time providing a different message and a different object from where it gets the data ‘this.name’. The output will be “Hello John!” for the first function call and “Hi Peter!” for the second one.

Consider the second example. Here we are making use of ‘call’ to invoke a function which has 3 parameters. The limitation of using a call method invocation is that you need to know the number of arguments of the invoking function beforehand which kind of makes it a little less flexible.

Using apply for function invocation:

The usage of apply is similar to the above implementation of call. The only difference being instead of passing the function parameters separately comma separated, we pass an array containing all the parameters. Take a look at the below example which is the implementation of the above example using apply


Using bind for function invocation:

Using apply and call were almost similar in its syntax and implementation logic. But bind is different. In apply and call, the function is invoked immediately. Bind on the other hand returns a function. It can be used for currying of functions  which means it allows for partial execution of the function. You can pass the function a set of parameters using the bind method and it will return a function which you can invoke later by optionally providing another set of arguments which will be used for execution.

Take a look at the below example to understand better:

In the above example we are invoking the function using bind by initially supplying the object person and one parameter. The object properties and the parameter are stored in the closure function which is returned by bind. This returned function is then invoked by providing additional remaining parameters. The initially supplied parameters were retained in the closure which was available for the subsequent execution.

I hope this article has given you enough information to get you started with understanding the differences between the different types of function invocation.

These concepts find a wide range of applications in real time projects. I have written an example that will help you understand this better. Consider you want to write a module in javascript and you want to invoke a function in the module using the format object.function(). You can use apply, call or bind for implementing this along with a revealing modular design pattern. I have implemented it using apply in the example below. Hope it will give a cleared picture of the application in real scenarios.

Comments are closed.