Implementing Call, Apply, and Bind Functions in JavaScript

Aishwarya Arul Lingam
September 11, 2023
No Comments

In JavaScript, the call, apply, and bind functions are powerful tools that allow you to manipulate the context (this value) of a function during its execution. These functions are essential for controlling how a function interacts with its surrounding environment, especially in situations where the default context might not be appropriate.

Difference between Call, Apply and Bind Functions:

Difference	Call	Apply	Bind
Invocation	func.call(thisArg, arg1, …)	func.apply(thisArg, [arg1, …])	newFunc = func.bind(thisArg, arg1)
Arguments	Individual arguments	Array or array-like object as args	Arguments can be partially provided
Execution	Immediate function invocation	Immediate function invocation	Creates a new function
Return Value	Returns the result of the function	Returns the result of the function	Returns a new function
Direct Invocation	Requires all arguments explicitly	Requires arguments as an array	Can pre-fill some arguments
Context Manipulation	Temporary context change	Temporary context change	Permanent context binding
Usage Scenarios	Specific argument lists	Dynamic or array-like argument lists	Creating reusable functions
Function Execution	Immediate execution of function	Immediate execution of function	Execution is deferred
Partial Argument Application	Not supported	Supported	Supported
Example	func.call(context, arg1, arg2)	func.apply(context, [arg1, arg2])	newFunc = func.bind(context, arg1)

``Call`` function in Javascript:

The call function is a method that every JavaScript function has. It allows you to explicitly specify the the context that the function should use when it’s executed. In addition to setting the context, you can also pass individual arguments to the function.

Here’s an explanation along with an example code:

 // Example object
 const person = {
  name: 'John',
 };

 // Function definition
 function greet(message) {
   console.log(`${message}, I'm ${this.name}`);
 }

 // Using the call function to invoke the greet function with a specific context
 greet.call(person, 'Hello');

In this example:

We have an object person, with a name property.
We define a function greet that takes a message parameter and logs a message using the context.
We use the call function to invoke the greet function, passing in the object as the context. The second argument and beyond are treated as the function’s arguments.
The greet function is executed in the context of the person object, and the output will be: “Hello, I’m John”.
In the call method, the first argument (person in this case) is the object that will be used as the this context within the function. Any subsequent arguments (‘Hello’ in this case) are passed as arguments to the function being called.
The call method immediately executes the function with the provided context and arguments. This is useful when you want to temporarily change the context of a function for a specific invocation.

You can also pass additional arguments to the call function if the function you’re calling accepts multiple arguments:

 function add(a, b) {
  console.log(a + b);
 }
 add.call(null, 5, 7);  // Output: 12

In this case, we’re using null as the context because the add function doesn’t depend on a specific object context. The numbers 5 and 7 are passed as arguments to the add function.

``Apply`` function in Javascript:

Similar to call, the apply function lets you set the this context for a function. However, instead of passing individual arguments, you provide an array or an array-like object containing the arguments. This can be useful when you have a dynamic number of arguments or when you’re dealing with functions that accept a variable number of parameters.

Here’s an explanation along with an example code:

 // Example object
 const person = {
   name: 'Alice',
 };

 // Function definition
 function greet(message) {
   console.log(`${message}, I'm ${this.name}`);
 }

 // Using the apply function to invoke the greet function with a specific context and       arguments as an array
 greet.apply(person, ['Hi']);

In this example:

We have an object person with a name property.
We define a function greet that takes a message parameter and logs a message using the this context.
We use the apply function to invoke the greet function, passing in the person object as the context and an array [‘Hi’] as arguments.
The greet function is executed in the context of the person object with the provided arguments, and the output will be: “Hi, I’m Alice”.
The apply method takes two arguments: the first argument (person in this case) is the object that will be used as the this context within the function, and the second argument is an array or an array-like object containing the arguments to be passed to the function.
The apply method immediately executes the function with the provided context and arguments array. This is useful when you have an array of values that you want to pass as arguments to a function.

The use of apply is less common in modern JavaScript since you can achieve the same result using the spread operator (…) to pass an array of arguments to a function directly:

 greet.call(person, ...['Hey']);

This eliminates the need to use apply in most cases.

`Bind` function in Javascript:

The bind function creates a new function that’s “bound” to a specific this context. Unlike call and apply, bind doesn’t execute the function immediately. Instead, it allows you to create a new function that will always have the same this value, no matter how or when it’s invoked. You can also pre-fill some or all of the function’s arguments using bind.

Here’s an explanation along with an example code:

 // Example object
 const person = {
   name: 'Sarah',
 };

 // Function definition
 function greet(message) {
   console.log(`${message}, I'm ${this.name}`);
 }

 // Using the bind function to create a new function with a fixed context
 const boundGreet = greet.bind(person);

 // Invoking the bound function
 boundGreet('Greetings');

In this example:

We have an object person with a name property.
We define a function greet that takes a message parameter and logs a message using the this context.
We use the bind function to create a new function boundGreet that is permanently bound to the person object as its context.
When we invoke boundGreet(‘Greetings’), the function is executed with the context of the person object, and the output will be: “Greetings, I’m Sarah”.
The bind method returns a new function with a fixed context (this value) and any specified arguments. The original function greet remains unchanged, and the new bound function can be stored and used like any regular function.

You can also pre-fill some arguments when using bind:

 const partialGreet = greet.bind(person, 'Hi');
 partialGreet();  // Output: Hi, I'm Sarah

In this case, the partialGreet function is created by binding the greet function with the person context and the argument ‘Hi’. When you call partialGreet(), it’s as if you’re calling greet(‘Hi’) with the person context.
The primary benefit of bind is that it allows you to create reusable functions that always have a consistent context, which can be especially useful in situations like event listeners or callback functions where the context might change.

In conclusion, the call, apply, and bind functions in JavaScript offer versatile tools for manipulating function context and arguments. call and apply enable immediate context modification, while bind creates reusable functions with predefined contexts, enhancing code flexibility and maintainability.