What is the difference between Call, Apply and Bind function explain in detail with example in Javascript?

Introduction to the call, apply, and bind methods:

In JavaScript, the call, apply, and bind methods are functions that allow you to call a function with a specified 'this' value and arguments. These methods can be useful for borrowing functions, setting the 'this' value, and creating partial functions.

The call and apply methods are used to immediately call a function with a specified 'this' value and arguments. On the other hand, the bind method is used to create a new function with a specified 'this' value and arguments, but the new function is not immediately called.

In this article, we will dive into the differences between the call, apply, and bind methods and provide examples of how they can be used in JavaScript. We will also compare these methods and summarize their key differences. By the end of this article, you should have a good understanding of how to use the call, apply, and bind methods in your own code.

Let's understand the difference between all these functions......

One key difference between the call and apply methods is that call requires the arguments to be passed in separately, while apply requires the arguments to be passed in as an array.

The bind method is different from 'call' and 'apply' because it does not immediately call the function. Instead, it returns a new function that, when called, will call the original function with the specified 'this' value and arguments. This can be useful for creating partial functions or for setting the 'this' value in a callback function.

// Declare a function
function greet(greeting, punctuation) {
  // Here 'this' denotes the object are passing with call function.
  console.log(greeting + ' ' + this.name + punctuation);
}

// Declare an object with a name property
var object = {
  name: 'John'
}

// Call the greet function, setting the this value to the object
greet.call(object, 'Hello', '!'); // Outputs: "Hello John!"

// Use the apply method with the same object and arguments
greet.apply(object, ['Hello', '!']); // Outputs: "Hello John!"

// Use the bind method to create a new function with the this value set to the object
var boundGreet = greet.bind(object);

// Call the new function
boundGreet('Hello', '!'); // Outputs: "Hello John!"

In the above example, the call and apply methods are used to call the greet function with a specified 'this' value (the object) and arguments. The bind method is used to create a new function (boundGreet) with the 'this' value set to the object.

In summary, the call and apply methods are used to call a function with a specified 'this' value and arguments, while the bind method is used to create a new function with a specified 'this' value and arguments that we use to execute later in our code.

Use Case of Call, Apply, and Bind functions:

(1). One common use case for these methods is borrowing functions. For instance, let's say we have an array of objects and we want to use the sort method to sort the objects by a certain property. However, the sort method is designed to work with arrays of primitive values, not objects. We can use the call method to borrow the sort method and use it with our array of objects:

var objects = [  { name: 'John' },  { name: 'Jane' },  { name: 'Bob' }];

// Use the call method to borrow the sort method and use it with our objects array
objects.sort.call(objects, function(a, b) {
  return a.name > b.name;
});

console.log(objects); // Outputs: [{ name: 'Bob' }, { name: 'Jane' }, { name: 'John' }]

In the above example, we use the call method to call the sort method with the array of our objects as the 'this' value and a comparator function as the argument. This allows us to sort the objects by the name property.

(2). Another use case of functions borrowing with the 'apply' method. For example, let's say we have an array of numbers and we want to use the Math.max function to find the maximum value. However, the Math.max function expects its arguments to be passed in as a comma-separated list, not as an array. We can use the apply method to call the Math.max function with an array of numbers as its arguments:

var numbers = [1, 2, 3, 4, 5];

// Use the apply method to call Math.max with the numbers array
var max = Math.max.apply(null, numbers);

console.log(max); // Outputs: 5

In the above example, the apply method is used to call the Math.max function with a null 'this' value and the numbers array as its arguments.

(3). Another use case for the call, apply, and bind methods are setting the 'this' value in a callback function. For example, let's say we have a button element and we want to attach a click event listener that logs the text content of the button. However, inside the event listener function, the 'this' value will refer to the global object (unless the strict mode is used). We can use the bind method to set the 'this' value to the button element:

var button = document.querySelector('button');

button.addEventListener('click', function() {
  console.log(this.textContent);
}.bind(button));

// Outputs: "Click me!" (assuming the button has the text "Click me!")

In the above example, we use the bind method to create a new function with the 'this' value set to the button element. When the button is clicked, the event listener function will be called with the 'this' value set to the button, allowing us to access the 'textContent' property.

Here is a summary of the differences between the call, apply, and bind methods in JavaScript:

Here is an example of how these differences might be represented in a table:

I hope this helps to clarify the differences between the call, apply, and bind methods in JavaScript. Let me know if you have any further questions.

Please don't forget to leave a comment if you like this post. 

Cheers :) 

Happy Coding..