JavaScript

JavaScript bind() Method

In a JavaScript program, when you utilize “this” keyword with a method and invoke it from a receiver object, sometimes “this” is not bounded to the required object and thus results in errors.  You can use the JavaScript bind() method to prevent this issue.

The JavaScript bind() method is used to bind functions. Using this method, you can bind an object to a common function to show different results according to your requirement. You can also utilize the bind() method for borrowing functions from another object.

This write-up will explain the JavaScript bind() method, and examples related to function borrowing and function binding will be also demonstrated. So, let’s start!

JavaScript bind() Method

The JavaScript bind() method saves the context of the current parameters and “this” for future execution. It usually maintains a function’s execution context that runs in a different context.

In the case of function binding, the bind() method creates a new function having the exact copy of the original function’s body. The value of “this” keyword is passed as the first parameter in the bind() method, and it can also take additional arguments for binding. Whereas, in function borrowing, the JavaScript bind() method borrows the function of another object without making its copy.

Syntax of JavaScript bind() Method

Have a look at the syntax of the JavaScript bind() method:

function.bind(thisArg, [arg1], [arg2], ...);

Here, the “thisArg” represent “this” keyword and “[arg1], [arg2], …” are the additional arguments. The given JavaScript bind() method will return a new function when it is invoked and also set “this” to the specified value.

Example 1: Using JavaScript bind() method for single-function binding
First of all, we will create a simple program that  comprises an “employee” object. The “employee” object has a “name” property and a “showInfo()” method:

let employee = {
    name: 'Jack Smith',
    showInfo: function() {
        console.log(this.name);
    }
};

The “this” keyword added in the “showInfo()” method will bind the “name” variable to the function therefore accessing “Jack Smith” as an employee name is not an issue. This process is known as default binding in JavaScript:

employee.showInfo();

Execution of the above-given program shows the following output:

Now, we will create a new variable function, “showInfo2” that refers to the “showInfo()” function of the employee object. In this case, the default binding will be lost, and the program will not show any output:

var showInfo2= employee.showInfo;
showInfo2();

So, when the callback “employee.showInfo” is invoked, the “name” property does not exist in the global object, and it is set to “undefined” as shown in output:

You can utilize the JavaScript bind() method to ensure that any binding related to “this” keyword is not lost. The bind() method sets “this” context to the specified object:

let employee = {
    name: 'Jack Smith',
    showInfo: function() {
        console.log(this.name);
    }
};

Here the JavaScript bind() method creates a new function with “this” keyword referring to the parameter in the parentheses. It also permits us to invoke the “showInfo()” function while passing the “employee” object as an argument:

var showInfo2= employee.showInfo.bind(employee);
showInfo2();

The showInfo2() method will display the assigned “name” of “employee” object:

Example 2: Using JavaScript bind() method for Multiple functions binding
In the following example, we will create three objects: “employee1”, “employee2”, and “employee3”:

let employee1 = {
    name: 'Jack'};
let employee2 = {
    name: 'Max'};
let employee3 = {
    name: 'Paul'};
function showInfo() {
    console.log(this.name);}

For each of the above-given object, we will invoke the “showInfo()” method by utilizing the JavaScript “bind()” method:

var showInfo2= showInfo.bind(employee1);
  showInfo2();
var showInfo3= showInfo.bind(employee2);
  showInfo3();
var showInfo4= showInfo.bind(employee3);
  showInfo4();

The output will display the name property values of the “employee1”, “employee2”, and “employee3” objects:

Example 3: Using JavaScript bind() method for function borrowing
With the help of the JavaScript bind() method, an object can borrow a function of another added object. For the demonstration, we will create two objects “car” and “airplane” having “name” property, “run()” and “fly()” methods respectively:

let car = {
    name: 'car',
    run: function(speed) {
        console.log(this.name + ' is moving at ' + speed + ' mph.');
    }
};
let airplane = {
    name: 'airplane',
    fly: function(speed) {
        console.log(this.name + ' is flying at ' + speed + ' mph.');
    }
};

Now, if you want the “airplane” object to run, then utilize the JavaScript bind() method for creating a run() function with the “this” keyword, which sets it to “airplane” object:

let run= car.run.bind(airplane, 20);
run();

We have called the bind() with the car.run() method and passed “airplane” as “name” property value and its speed as “20”:

The above-given output signifies that by using the JavaScript bind() method, we have successfully borrowed the run() method from the car object, without making its copy.

Conclusion

The JavaScript bind() method saves the context of the current parameters and “this” for future execution. It usually maintains a function’s execution context that runs in a different context. It can be utilized for function binding and function borrowing. This write-up explained the JavaScript bind() method, and examples related to function borrowing and function binding are also demonstrated.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.