Difference between call and bind

The bind() and call() methods in JavaScript are used to control the execution context (this value) of a function. While they serve a similar purpose, they differ in the way they handle the function invocation and the passing of arguments.

bind() method:

• The bind() method creates a new function with a specified this value and optional arguments. It does not immediately invoke the function.

• The bind() method returns a new function with the specified this value and pre-defined arguments. You can call the returned function later.

• It is useful when you want to create a new function that is permanently bound to a specific context (this value), which can be useful when you want to pass the function around or use it as a callback.

• The original function is not affected by bind(), meaning that the function's context is not permanently changed.

Example:

function greet() {

console.log(`Hello, ${this.name}!`);

}

const person = {

name: "John",

};

const boundGreet = greet.bind(person); boundGreet();

// Output: Hello, John!

call() method:

• The call() method is used to immediately invoke a function and specify the this value and arguments in a single call.

• Unlike bind(), call() does not create a new function. Instead, it directly invokes the function with the provided context (this value) and arguments.

• It is useful when you want to call a function with a specific context (this value) and pass arguments individually (not as an array).

• The original function is executed with the specified this context but is not permanently bound to it.

Example:

function greet() {

console.log(`Hello, ${this.name}!`);

}
const person = {

name: "John",

};
greet.call(person); // Output: Hello, John!

In summary, bind() creates a new function with a specified this value, allowing you to call it later with that context, while call() directly invokes the function with the specified this value and arguments in a single call.