In this section, we will learn what the bind() function is and how to use it in JavaScript.

What is JavaScript bind() Function?

As mentioned before, functions are essentially a sub-type of object. This means they can have property and we use the name of the function to invoke those properties.

JavaScript already created a couple of useful properties for functions. One of them is the `bind()` method.

In functions that used the `this` keyword in their body, we can call the `bind` method to explicitly bind the `this` keyword to a specific object.

Note: calling the `bind` method will not invoke the target function immediately! Instead, it will bind the target object to the `this` keyword in the body of the function and return a new function.

This new function can be stored in a variable and be called in later times. So the newly created function is already bounded to an object and there won’t be any bounding operation in it anymore.

JavaScript bind() Function Syntax:

function.bind(obj, args…);

bind() Function Parameters:

The method takes at least one argument and that is a reference to an object that we want the `this` keyword in the body of the target function (the one that invoked this method) to be bound to.

The `bind()` method also takes optional arguments as well. These arguments will be assigned to the parameter of the newly created function.

Note: the new function will take the parameter/s of the old function and use them as its own parameter/s.

So if we add multiple optional arguments to the `bind()` method:

• The first optional argument will be assigned to the first parameter of the function.
• The second optional argument will be assigned to the second parameter of the function and so on…

At the end, when invoking the new function, we no-longer need to define a set of new arguments for that function. Basically, when invoking the new function, it will use the optional arguments that we assigned to the `bind()` method.

bind() Function Return Value:

The return value of this method is a reference to a new function that has bounded the `this` keyword in its body to the object we’ve passed as the first argument to the method.

Example: using bind() function in JavaScript

const obj = {
  firstName: "John",
  lastName : "Doe"
}
function changeName(name , lastName){
  this.firstName = name;
  this.lastName = lastName;
}
let fnc = changeName.bind(obj);
fnc("Jack", "Bauer");
console.log(obj.firstName , obj.lastName);

Output:

Jack Bauer

Take a look at this statement:

let fnc = changeName.bind(obj);

Here we’ve bound the `this` keyword in the body of the `changeName` function to the `obj` object and stored the new function in the `fnc` variable.

So when we called the function `fnc`, the execution engine knows that the `firstName` and the `lastName` properties in the body of the function belong to the `obj` object.

Example: bind() method in JavaScript

const obj = {
  firstName: "John",
  lastName : "Doe"
}
function changeName(name , lastName){
  this.firstName = name;
  this.lastName = lastName;
}
let fnc = changeName.bind(obj, "Jack","Bauer");
fnc();
console.log(obj.firstName , obj.lastName);

Output:

Jack Bauer

More to Read:

JavaScript call() function tutorial 

JavaScript apply() function tutorial