What is Call, Bind, and Apply in Javascript?

Difference between Call, Bind, and Apply

Call, Bind, and Apply are used to invoke the function.

but why we need these to invoke?

In javascript, we have this keyword that refers to the object it belongs to.

A function's this keyword behaves a little differently in JavaScript compared to other languages. It also has some differences between strict mode and non-strict mode.

In most cases, the value of this is determined by how a function is called (runtime binding). It can't be set by assignment during execution, and it may be different each time the function is called.

We use call, bind and apply methods to set the this keyword independent of how the function is called.

call and bind are used to invoke a function immediately and bind returns a bound function that, when executed later, will have the correct context (this). The first parameter of these method sets this value which is the object upon which the function is invoked. The only difference of apply() with the call() method is that the second parameter of the apply() method accepts the arguments to the actual function as an array while in call accepts individual arguments.

Here is the example -

var person = {
  firstname: "Jignesh",
  lastname: "Kumar ",
  getPersonName: function () {
    return this.firstname + " " + this.lastname;
  },
};

var getNameWithPlace = function (place, state) {
  console.log(this.getPersonName() + " from " + place + " , " + state);
};
var bindNameFn = getNameWithPlace.bind(person); // creates new object and binds person. 'this' of person === person now

bindNameFn("Bangalore", "Karnataka"); // Jignesh Kumar  from Bangalore , Karnataka
getNameWithPlace.call(person, "Bangalore", "Karnataka"); // Jignesh Kumar  from Bangalore , Karnataka
getNameWithPlace.apply(person, ["Bangalore", "Karnataka"]); // Jignesh Kumar  from Bangalore , Karnataka

Polyfill for call, bind and apply

Function.prototype.myBind = function (context, ...args1) {
  if (typeof this !== "function") {
    throw new Error(this + "cannot be bound as it's not callable");
  }
  let fn = this;
  return function (...arg2) {
    fn.apply(context, [...args1, ...arg2]);
  };
};

Function.prototype.myCall = function (context, ...args) {
  if (typeof this !== "function") {
    throw new Error(this + "cannot be bound as it's not callable");
  }
  context.fnName = this;
  context.fnName(...args);
};

Function.prototype.myApply = function (context, ...args) {
  if (typeof this !== "function") {
    throw new Error(this + "cannot be bound as it's not callable");
  }
  context.fnName = this;
  context.fnName(...args[0]);
};

getNameWithPlace.myCall(person, "Bangalore", "Karnataka"); // Jignesh Kumar  from Bangalore , Karnataka
getNameWithPlace.myApply(person, ["Bangalore", "Karnataka"]); // Jignesh Kumar  from Bangalore , Karnataka

Here is a good video on call, bind and apply, do watch it to understand it better -

Conclusion

These built-in methods, that exist on every JS function can be very useful. Even if you do not end up using them in your day to day programming, still you have to know these concepts and questions related to these methods frequently asked in interviews.

What is Call, Bind, and Apply in Javascript?