Javascript Call() & Apply() Vs Bind()?

Javascript call() & apply() vs bind()

As a JavaScript developer, you may have come across the terms call(), apply(), and bind(). These are powerful methods that can be used to manipulate the this value and pass arguments to functions in different ways. In this blog post, we will explore the differences between call(), apply(), and bind() and when to use each of them.

The call() Method

The call() method is used to invoke a function and explicitly set the value of this. It takes the function’s context as the first argument, followed by any number of arguments that you want to pass to the function.

Here’s an example:

function greet(name) {
  console.log("Hello, " + name + "! My name is " + this.name + ".");
}

const person = {
  name: "John Doe"
};

greet.call(person, "Alice");

The call() method is used to invoke the greet() function and set the value of this to the person object. The output will be:

Hello, Alice! My name is John Doe.

The apply() Method

The apply() method is similar to the call() method, but it takes the function’s context as the first argument and an array or an array-like object as the second argument, which contains the arguments to be passed to the function.

Here’s an example:

function sum(a, b) {
  return a + b;
}

const numbers = [3, 5];

const result = sum.apply(null, numbers);

console.log(result); // Output: 8

In this example, the apply() method is used to invoke the sum() function and pass the arguments 3 and 5 from the numbers array. The output will be the sum of the two numbers, which is 8.

The bind() Method

The bind() method is used to create a new function with a specific this value and any number of preset arguments. It returns a new function that, when called, has its this value set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

Here’s an example:

const person = {
  name: "John Doe",
  greet: function() {
    console.log("Hello, " + this.name + "!");
  }
};

const greetPerson = person.greet.bind(person);

greetPerson(); // Output: Hello, John Doe!

In this example, the bind() method is used to create a new function greetPerson with the this value set to the person object. When greetPerson() is called, it will output Hello, John Doe!.

When to Use Each Method

Now that we understand the differences between call(), apply(), and bind(), let’s discuss when to use each method:

Use call() when you know the exact number of arguments to be passed to the function and they are available as individual values.
Use apply() when you have an array or an array-like object containing the arguments to be passed to the function.
Use bind() when you want to create a new function with a specific this value and preset arguments, which can be called later.

By understanding the differences between call(), apply(), and bind(), you can leverage these methods to manipulate the this value and pass arguments effectively in your JavaScript code.

Javascript Call() & Apply() Vs Bind()?