While programming in JavaScript, there are situations where there is a need to integrate the functionalities of an object with a user-defined function. Moreover, applying some added functionality to the created object or its property to apply some operation without changing it. In such cases, JavaScript provides the “call()”, “apply()”, and “bind()” methods to cope with such situations.

This article will discuss the differences between the call(), apply() and bind() methods.

JavaScript call() vs apply() vs bind() Methods

Call() Method

The “call()” method invokes a function with a specified context. This method can be applied to integrate the functionalities of an object and a function by accessing the function having the referred object as a function’s parameter along with the passed parameters simultaneously.

Syntax

In the given syntax:

• “ref” refers to the value to be utilized as “this” when calling a function.
• “args” points to the arguments for the function.

Example

Let’s follow the below-stated example:

In the above code snippet, perform the following steps:

• Create an object having the stated property.
• After that, declare a function named “sumNum()” having the stated parameters.
• In its definition, use “this” to refer to the created object’s property and add the placed parameters to it.
• Finally, access the function and the “call()” method by referring to the created object and the passed parameter. This will add the parameter values to the object property’s value.

Output

From the above output, it can be observed that the sum of the values of the object’s property and the pass parameters are returned.

Apply() Method

This method is identical to the “call()” method. The difference in this method is that it takes the function parameters in the form of an array.

Syntax

In the above syntax:

• “ref” refers to the value to be utilized as “this” when calling a function.
• “array” indicates the arguments in the form of an array with which the function will be called.

Example

Let’s have a look at the following example:

In the adobe code snippet, perform the following steps:

• Repeat the discussed steps in the example of the “call()” method for creating an object, declaring a function with parameters, and referring to the object.
• Finally, access the defined function by containing the referred object as its first parameter and the function’s parameter values in the form of an array.
• This will similarly result in returning the sum of the object and passed parameter values.

Output

From the above output, it is evident that the desired sum is returned.

Bind() Method

The “bind()” method does not execute a function immediately, rather, it returns a function that can be executed later on.

Syntax

In the above syntax:

• “ref” corresponds to the value to be passed as “this” parameter to the target function.
• “args” refers to the arguments for the function.

 

Example

Let’s follow the given example to understand clearly:

In the above JavaScript code, perform the following steps:

• Recall the discussed steps for creating an object and defining a function having the stated parameters.
• In the next step, apply the “bind()” method and repeat the same procedure for containing the created object and the passed parameter values to return the sum.
• Here, store the performed functionalities in the previous step in an “inline” function named “updFunction()” which can be utilized later as well.

 

Output

In the above output, it is evident that upon calling the stated “inline” function, the sum is returned as a result.

Example: Applying call(), apply() and bind() With the Same Object and Function

In this example, apply the discussed methods on a single object with the help of a function.

Let’s follow the below-given example step-by-step:

In the above lines of code, perform the following steps:

• Revive the discussed steps for creating an object, declaring a function having the stated parameters.
• In the further code, access the defined function with each discussed method.
• It can be observed that all three methods are applied differently along with the function but yield the same output, as evident below.

Output

From the above output, it can be seen that all the methods give the same output.

Conclusion

The “call()” and “apply()” methods can be implemented to integrate the functionalities of an object and a function by passing the parameter values simply and in the form of an array, respectively. The “bind()” method can also be applied similarly. The additional functionality in this method is that it is stored in a function to be utilized later. This tutorial explained the differences between the call(), apply() and bind() methods.