JavaScript `call`, `apply`, and `bind` Methods

In JavaScript, the call, apply, and bind methods are built-in functions that help us control the context (this) in which a function is executed. These methods allow you to call a function or method and set this to any object you want, making them very powerful for reusing functions across different objects.

What is the `call` Method?

The call method allows you to call a function or method of one object and use it on another object. It invokes the function immediately and passes arguments one by one.

Example: Using `call` Method

const person = {
    f_name: 'Pratap',
    l_name: 'Das',
    fullName: function(hometown, country) {
        return this.f_name + " " + this.l_name + ", " + hometown + ", " + country;
    }
};
 
const person2 = {
    f_name: 'Dev',
    l_name: 'D',
};
 
// Use the fullName method from person on person2
const callResult = person.fullName.call(person2, 'Haldia', 'INDIA');
console.log(callResult); // Output: "Dev D, Haldia, INDIA"

In this example, the fullName method is defined in the person object. By using call, we can use the same method for person2 by setting this to person2.

What is the apply Method?

The apply method is similar to call, but instead of passing arguments one by one, it takes arguments as an array.

Example: Using apply Method

const applyResult = person.fullName.apply(person2, ['Haldia', 'India']);
console.log(applyResult); // Output: "Dev D, Haldia, India"

Here, apply is used to call the fullName method of the person object on person2, and the arguments are passed as an array.

What is the bind Method?

The bind method is similar to call, but it does not invoke the function immediately. Instead, it returns a new function with the specified this value and arguments. This new function can be called later.

Example: Using bind Method

const bindResult = person.fullName.bind(person2, 'Haldia', 'Bharat');
console.log(bindResult); // Output: [Function]
console.log(bindResult()); // Output: "Dev D, Haldia, Bharat"

With bind, the fullName method is "bound" to person2, but it is not executed immediately. The function is stored in bindResult and can be called whenever needed.

Borrowing Methods with `call` and `apply`

You can borrow methods from one object and use them on another object using call or apply.

Example: Borrowing Methods

const userDetails = {
    name: 'Pratap',
    id: 100,
    designation: 'Software developer',
    printDetail: function() {
        console.log(this.name); // Uses the 'this' of the calling object
    }
};
 
const contactDetails = {
    name: 'PD',
    company: 'BCD'
};
 
// Borrow printDetail method from userDetails and use it on contactDetails
userDetails.printDetail.call(contactDetails); // Output: "PD"

Using `bind` to Create a Copy of a Function

With bind, you can create a copy of a function that is permanently bound to a specific object.

Example: Using `bind` to Copy a Function

const userDetails = {
    name: 'Pratap',
    id: 100,
    designation: 'Software developer'
};
 
function printDetail() {
    console.log(this.name);
}
 
// Bind printDetail to userDetails
const boundPrintDetail = printDetail.bind(userDetails);
boundPrintDetail(); // Output: "Pratap"

Key Differences

call: Invokes a function immediately with a specified this value and arguments one by one.
apply: Invokes a function immediately with a specified this value, but arguments are passed as an array.
bind: Creates a new function with a specified this value and arguments, which can be called later.

Conclusion

The call, apply, and bind methods are powerful tools in JavaScript for managing the context (this) of functions. They provide flexibility in borrowing methods, reusing functions across different objects, and handling dynamic contexts effectively.

Closures Introduction

JavaScript call, apply, and bind Methods

What is the call Method?

Example: Using call Method