JavaScript Function bind()

Method Borrowing

Like with call() and apply(), the bind() method can borrow a method from another object.

Unlike call() and apply(), the bind() method does not run the function immediately.

Instead, it returns a new function that can be called later.

The new function remembers the this value you chose.

Basic bind() Syntax

The bind() method creates a new function.

The first argument sets the this value for the new function.

Additional arguments become fixed arguments for the new function.

Syntax

const newFunction = functionName.bind(this, arg1, arg2, ...);

Using bind() to Fix this

The most common use of bind() is to make sure a function always uses the same this value.

Example

const person1 = { name: "John" };

const person2 = { name: "Paul" };

const person3 = { name: "Ringo" };

function greet() {

  return "Hello " + this.name;

}

const greetJohn = greet.bind(person1);

greetJohn();

The example below creates 2 objects (person and member).

The member object borrows the fullname method from the person object:

Example

// Create person Object

const person = {

  firstName:"John",

  lastName: "Doe",

    fullName: function () {

    return this.firstName + " " + this.lastName;

    }

}

// Create member Object

const member = {

  firstName:"Hege",

  lastName: "Nilsen",

}

// Bind the fullName method to the member Object

let fullName = person.fullName.bind(member);

// Later call fullname()

fullname()

bind() vs call() and apply()

The difference between these methods is important:

• call() calls a function immediately
• apply() calls a function immediately
• bind() returns a new function

Comparison

// Call a function

greet.call(person);

// Call a function

greet.apply(person);

// Create a new function

const greetLater = greet.bind(person);

// Call the new function

greetLater();

bind() for Functions Called Later

Without bind(), the this value may be lost.

Example

const person = {

      name: "John",

      sayHello: function() {

        return "Hello " + this.name;

      }

    };

    const hello = person.sayHello;

    hello(); // this is not person

The function above loses its this value.

Example with bind()

const hello = person.sayHello.bind(person);

    hello();

Using bind() for Preserving this

The bind() method can be used to prevent losing this.

In the following example, the person object has a display method.

In the display method, this refers to the person object:

Example

const person = {

  firstName:"John",

  lastName: "Doe",

    display: function () {

    let x = document.getElementById("demo");

    x.innerHTML = this.firstName + " " + this.lastName;

    }

}

person.display();

When a function is used as a callback, this is lost.

The example below uses person.display as a callback in the setTimeout() method.

Example

const person = {

  firstName:"John",

  lastName: "Doe",

    display: function () {

    let x = document.getElementById("demo");

    x.innerHTML = this.firstName + " " + this.lastName;

    }

}

setTimeout(person.display, 3000);

The bind() method solves this problem.

In the following example, the bind() method is used to bind person.display to person.

Example

const person = {

  firstName:"John",

  lastName: "Doe",

    display: function () {

    let x = document.getElementById("demo");

    x.innerHTML = this.firstName + " " + this.lastName;

    }

}

let display = person.display.bind(person);

setTimeout(display, 3000);

bind() with Arguments

Arguments passed to bind() become fixed values.

This is sometimes called partial application.

Example

function multiply(a, b) {

      return a * b;

    }

    const double = multiply.bind(null, 2);

    double(5);

bind() Does Not Change the Original Function

The original function is not modified.

Each call to bind() creates a new function.

Examples

const greetJohn = greet.bind({ name: "John" });

const greetAnna = greet.bind({ name: "Anna" });

Common Mistakes

• ### Expecting bind() to Call the Function bind() does not execute the function.
• ### Forgetting to Call the Returned Function You must call the new function yourself.
• ### Overusing bind() Sometimes a normal function call is simpler.

Next Chapter

JavaScript Self Invocing Functions