Skip to main content

Javascript Function Bind

The bind() method in JavaScript creates a new function with a specified this value and optionally some pre-set arguments.

It returns a new function that, when called, has the this keyword set to the provided value, with a given sequence of arguments preceding any other arguments provided when the new function is called.

Here's an example of how to use bind():

const person = {
firstName: "John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
},
};

const greet = function (message) {
console.log(message + ", " + this.fullName());
};

const greetJohn = greet.bind(person, "Hello");
greetJohn(); // "Hello, John Doe"

In this example:

  • We have an object person with two properties firstName and lastName, and a method fullName() that returns the full name of the person.
  • We also have a function greet() that takes a message as an argument and logs a greeting message that includes the full name of the person.
  • We create a new function greetJohn by calling bind() on the greet() function and passing the person object as the first argument, followed by the message "Hello".
  • This creates a new function that, when called, logs the message "Hello, John Doe".
  • We then call greetJohn(), which logs the message using the fullName() method of the person object.
tip

The bind() method is useful when you want to create a new function that has a fixed this value and some pre-set arguments. It allows you to reuse a function with different this values or argument sequences without having to redefine the function.

Difference between bind(), call(), and apply()​

The bind() method is similar to the call() and apply() methods, but there are some differences:

bind()call()apply()
Creates a new function with a specified this value and arguments provided one by one.Calls a function with a specified this value and arguments provided one by one.Calls a function with a specified this value and arguments provided as an array (or an array-like object).
Returns a new function.Returns the result of the function.Returns the result of the function.
Does not immediately execute the function.Immediately executes the function.Immediately executes the function.