What is the Difference Between call, apply, and bind?

In JavaScript, call, apply, and bind are methods that allow you to control the context (this value) in which a function is executed. While their purposes are similar, they differ in how they handle arguments and when the function is invoked.

---

#### call

• Description:

The call() method invokes a function immediately, allowing you to specify the value of this and pass arguments individually (comma-separated).

• Syntax:

    func.call(thisArg, arg1, arg2, ...)
    

• Example:

    var employee1 = { firstName: "John", lastName: "Rodson" };
    var employee2 = { firstName: "Jimmy", lastName: "Baily" };

    function invite(greeting1, greeting2) {
      console.log(
        greeting1 + " " + this.firstName + " " + this.lastName + ", " + greeting2
      );
    }

    invite.call(employee1, "Hello", "How are you?"); // Hello John Rodson, How are you?
    invite.call(employee2, "Hello", "How are you?"); // Hello Jimmy Baily, How are you?
    

---

#### apply

• Description:

The apply() method is similar to call(), but it takes the function arguments as an array (or array-like object) instead of individual arguments.

• Syntax:

    func.apply(thisArg, [argsArray])
    

• Example:

    var employee1 = { firstName: "John", lastName: "Rodson" };
    var employee2 = { firstName: "Jimmy", lastName: "Baily" };

    function invite(greeting1, greeting2) {
      console.log(
        greeting1 + " " + this.firstName + " " + this.lastName + ", " + greeting2
      );
    }

    invite.apply(employee1, ["Hello", "How are you?"]); // Hello John Rodson, How are you?
    invite.apply(employee2, ["Hello", "How are you?"]); // Hello Jimmy Baily, How are you?
    

---

#### bind

• Description:

The bind() method creates a new function with a specific this value and, optionally, preset initial arguments. Unlike call and apply, bind does not immediately invoke the function; instead, it returns a new function that you can call later.

• Syntax:

    var boundFunc = func.bind(thisArg[, arg1[, arg2[, ...]]])
    

• Example:

    var employee1 = { firstName: "John", lastName: "Rodson" };
    var employee2 = { firstName: "Jimmy", lastName: "Baily" };

    function invite(greeting1, greeting2) {
      console.log(
        greeting1 + " " + this.firstName + " " + this.lastName + ", " + greeting2
      );
    }

    var inviteEmployee1 = invite.bind(employee1);
    var inviteEmployee2 = invite.bind(employee2);

    inviteEmployee1("Hello", "How are you?"); // Hello John Rodson, How are you?
    inviteEmployee2("Hello", "How are you?"); // Hello Jimmy Baily, How are you?
    

---

#### Summary

| Method | Invokes Function Immediately? | How Arguments Are Passed | Returns |
|--------|-------------------------------|----------------------------------|--------------|
| call | Yes | Comma-separated list | Function's result |
| apply| Yes | Array or array-like object | Function's result |
| bind | No | (Optional) preset, then rest | New function |

---

## Key Points

• call and apply are almost interchangeable; both invoke the function immediately, but differ in how arguments are passed.
• _Tip:_ "Call is for Comma-separated, Apply is for Array."
• bind does not execute the function immediately. Instead, it creates a new function with the specified this value and optional arguments, which can be called later.

• Use call or apply when you want to immediately invoke a function with a specific this context. Use bind when you want to create a new function with a specific this context to be invoked later.

---