Difference between call apply and bind in javascript.

In JavaScript, this refers to the object that is currently calling a function. The value of this can vary depending on the context in which a function is called, which can lead to unexpected behavior.

Controlling this is essential when you need a function to consistently refer to a specific object, especially in event handling, object-oriented programming, and callbacks. Let’s dive into each method and learn how they work to set this explicitly.

bind(): Creating a New Function with Bound this

The bind() method creates a new function that, when called, has its this keyword permanently set to the provided value. It doesn't execute the function immediately but returns a new function with this locked to a specified object.

Syntax

function.bind(thisArg, [arg1, arg2, ...]);

Example

const person = {
  firstName: "John",
  lastName: "Doe",
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`;
  },
};
 
const logName = function () {
  console.log(`Logged name: ${this.getFullName()}`);
};
 
// Bind logName to the person object
const logPersonName = logName.bind(person);
 
logPersonName(); // Output: "Logged name: John Doe"

Here, logPersonName is a new function where this is permanently bound to person. So, even if you pass logPersonName around in your code, this will always refer to the person object.

call(): Execute a Function with Specific this and Individual Arguments

The call() method immediately invokes a function with this set to the provided value. You can also pass arguments individually after the this argument.

Syntax

function.call(thisArg, arg1, arg2, ...);

Example

const person = {
  firstName: "John",
  lastName: "Doe",
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`;
  },
};
 
const logName = function () {
  console.log(`Logged name: ${this.getFullName()}`);
};
 
// Call logName with person as this
logName.call(person); // Output: "Logged name: John Doe"

In this example, call() sets this to person and invokes logName immediately.

apply(): Execute a Function with Specific this and Arguments as an Array

The apply() method works similarly to call() but takes arguments as an array. This can be particularly useful when you want to pass an array of data to a function.

Syntax

function.apply(thisArg, [argsArray]);

Example

const person = {
  firstName: "John",
  lastName: "Doe",
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`;
  },
};
 
const logName = function () {
  console.log(`Logged name: ${this.getFullName()}`);
};
 
// Call logName with person as this and an empty array of arguments
logName.apply(person, []); // Output: "Logged name: John Doe"

When to Use bind(), call(), and apply()

• Use bind() when you need a new function with a specific this value that can be called later.
• Use call() when you want to immediately invoke a function with a specific this and pass arguments individually.
• Use apply() when you want to immediately invoke a function with a specific this and pass arguments as an array.