dark

Understanding Call, Apply and Bind in JavaScript

Understanding Call, Apply and Bind in JavaScript

When it comes to JavaScript, there are three methods that are used to control the value of ‘this’ inside a function. These are: Call, Apply and Bind. Although they are similar in functionality, there are some key differences between them. In this article, we will explore the concept of Call, Apply and Bind in JavaScript, provide code examples to illustrate their usage, and explain related concepts that can help you understand the topic better.

What is the concept of Call, Apply and Bind?

Call, Apply and Bind are methods that are used to set the value of ‘this’ inside a function. When a function is invoked, the value of ‘this’ is determined by how the function is called. In other words, it depends on the context in which the function is executed. By using Call, Apply and Bind, we can change the value of ‘this’ to a specific object, which allows us to control how the function behaves.

Call

The Call method is used to call a function with a given ‘this’ value and arguments provided individually. It takes the object to be used as ‘this’ inside the function as the first argument, and the remaining arguments are the arguments to be passed to the function. Here is an example:

const person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

const person2 = {
  firstName: "Mary",
  lastName: "Doe"
}

console.log(person.fullName.call(person1)); // Output: John Doe
console.log(person.fullName.call(person2)); // Output: Mary Doe

In the example above, we have a ‘person’ object with a ‘fullName’ method. We also have two other objects, ‘person1’ and ‘person2’. We use the ‘call’ method to call the ‘fullName’ method with ‘person1’ and ‘person2’ as the ‘this’ value. This allows us to reuse the ‘fullName’ method for different objects.

Apply

The Apply method is similar to the Call method, but it takes an array of arguments instead of individual arguments. It also takes the object to be used as ‘this’ inside the function as the first argument. Here is an example:

const numbers = [5, 6, 2, 3, 7];

const maxNum = Math.max.apply(null, numbers);

console.log(maxNum); // Output: 7

In the example above, we have an array of numbers. We use the ‘apply’ method to call the ‘Math.max’ method with the array of numbers as the arguments. This allows us to find the maximum number in the array.

Bind

The Bind method is used to create a new function with a specified ‘this’ value and arguments. It returns a new function that can be called later. It takes the object to be used as ‘this’ inside the function as the first argument, and the remaining arguments are the arguments to be passed to the function. Here is an example:

const person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

const person2 = {
  firstName: "Mary",
  lastName: "Doe"
}

const fullName1 = person.fullName.bind(person1);
const fullName2 = person.fullName.bind(person2);

console.log(fullName1()); // Output: John Doe
console.log(fullName2()); // Output: Mary Doe

In the example above, we have a ‘person’ object with a ‘fullName’ method. We also have two other objects, ‘person1’ and ‘person2’. We use the ‘bind’ method to create two new functions, ‘fullName1’ and ‘fullName2’, with ‘person1’ and ‘person2’ as the ‘this’ value. This allows us to reuse the ‘fullName’ method for different objects.

There are some related concepts and methods that can help you understand Call, Apply and Bind better. These are:

  • Arrow Functions: Arrow functions do not have their own ‘this’ value. Instead, they use the ‘this’ value of the enclosing lexical scope. This means that they cannot be used with Call, Apply or Bind.
  • Function.prototype.call(): This is a method that is used to call a function with a given ‘this’ value and arguments provided individually. It is similar to the Call method, but it takes the function as the first argument instead of the object.
  • Function.prototype.apply(): This is a method that is used to call a function with a given ‘this’ value and arguments provided as an array. It is similar to the Apply method, but it takes the function as the first argument instead of the object.

Conclusion

In summary, Call, Apply and Bind are methods that are used to control the value of ‘this’ inside a function. Call is used to call a function with a given ‘this’ value and arguments provided individually, Apply is similar to Call but takes an array of arguments, and Bind is used to create a new function with a specified ‘this’ value and arguments. By understanding these methods, you can write more flexible and reusable code in JavaScript.

Related tutorials