Understanding Explicit Binding in JavaScript: Call, Bind, and Apply Methods.

JavaScript is a powerful language that provides several ways to bind this to a specific object. One such way is explicit binding, which allows developers to explicitly set the value of this for a function.

In this blog, we will dive deep into explicit binding and explore how the call, bind, and apply methods can be used to achieve it.

What is Explicit Binding?

In JavaScript, every function has its own this context, which refers to the object that the function is bound to. By default, this refers to the global object in non-strict mode and undefined in strict mode. However, the value of this can be changed by using different binding methods.

Explicit binding refers to the process of explicitly setting the value of this for a function. This can be done by using the call, bind, or apply methods provided by JavaScript.

1: Call Method

const person = {
  name: 'John Doe',
  age: 30,
  greet: function() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
};

const anotherPerson = {
  name: 'Jane Doe',
  age: 25
};

person.greet.call(anotherPerson); // Output: Hello, my name is Jane Doe and I'm 25 years old.

In the above example, we have defined a person object with a greet method that logs the name and age of the person. We then create another object called anotherPerson and use the call method to call the greet method of the person object with the anotherPerson object as the this value. As a result, the name and age properties of anotherPerson are logged instead of those of person

2: Bind Method

The bind method creates a new function with a given this value and arguments provided as an array. The original function is not called immediately but can be called later with the new keyword or as a normal function call. Here's an example:

  const person = {
    name: 'John Doe',
    age: 30,
    greet: function () {
      console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    }
  };

  const anotherPerson = {
    name: 'Jane Doe',
    age: 25
  };

  const bindPerson = person.greet.bind(anotherPerson);
  bindPerson() // Output: Hello, my name is Jane Doe and I'm 25 years old.

The above code uses the bind method to create a new function called bindPerson. This method is called on the greet method of person and passes anotherPerson as an argument. bindPerson is essentially a new function that calls greet, but the this keyword inside greet will be set to anotherPerson, not person.

“bind ”and “call ”methods work exactly the same, but “bind ”creates a copy of a function which we can use later and “call” executes the function immediately.

3: Apply Method

The syntax for the apply() method is simple. It takes two arguments: the first argument is the value of this that you want to set for the function, and the second argument is an array of arguments to pass to the function. Here is an example of how to use the apply() method:

const person = {
  name: "John",
  age: 30,
  greet: function(greeting, farewell) {
    console.log(greeting + ", my name is " + this.name + " and I am " + this.age + " years old. " + farewell);
  }
}

const anotherPerson = {
  name: "Jane",
  age: 25
}

person.greet.apply(anotherPerson, ["Hello", "Goodbye"]);

// output: Hello, my name is Jane and I am 25 years old. Goodbye

In this example, we have modified the greet() method to take two additional arguments, greeting and farewell. We then use the apply() method to call this method with the anotherPerson object as the this value, and an array of two arguments ["Hello", "Goodbye"].

Passing multiple arguments with the apply() method is as simple as providing an array of arguments as the second argument to the method call. This allows you to pass any number of arguments to a function or method, making it more flexible and powerful.

In conclusion, call, bind, and apply methods are powerful tools in JavaScript that enable developers to manipulate the context of a function and pass arguments to it. These methods are particularly useful when dealing with objects and methods that have a dynamic context or when we need to reuse a function with different arguments and contexts.

It is important to use these methods judiciously and understand their limitations to avoid potential issues such as binding too many objects or contexts.

Overall, call, bind, and apply are important concepts to understand for any JavaScript developer, and can help you write more effective and maintainable code.

Thanks for reading 🙂

I hope you found it informative and helpful. If you are a front end developer then you need to checkout array methods in javacript.