Skip to main content

JavaScript Functions

JavaScript call, apply and bind

Written by Published

JavaScript call, apply and bind let you choose what the this keyword refers to inside a function.

Normally this depends on how a function is called.

These three methods let you set it yourself.

Example

Example

javascript

const person = { name: "Ada" };

function greet() {
  return "Hello " + this.name;
}

console.log(greet.call(person));

Here, call runs greet with this set to person.

The output is Hello Ada.

What do call, apply and bind do?

call runs the function immediately, with arguments listed one by one.

apply runs it immediately, with arguments given as an array.

bind does not run it; it returns a new function with this locked in.

Syntax

Syntax

javascript

func.call(thisValue, arg1, arg2);
func.apply(thisValue, [arg1, arg2]);
const bound = func.bind(thisValue);

The first argument of all three is the value this should take.

Using call

call passes arguments one after another.

Example

Example

javascript

const person = { name: "Ada" };

function introduce(city, job) {
  return this.name + " from " + city + ", " + job;
}

console.log(introduce.call(person, "London", "engineer"));

The first argument sets this; the rest are normal arguments.

Using apply

apply does the same job but takes the arguments as an array.

It is useful when the arguments are already in an array.

Example

Example

javascript

const person = { name: "Ada" };

function introduce(city, job) {
  return this.name + " from " + city + ", " + job;
}

console.log(introduce.apply(person, ["London", "engineer"]));

Modern code often uses the spread operator instead.

Using bind

bind returns a new function instead of running it.

The new function always has the same this, no matter how it is called later.

Example

Example

javascript

const person = { name: "Ada" };

function greet() {
  return "Hello " + this.name;
}

const greetAda = greet.bind(person);

console.log(greetAda());

This is useful when passing a method as a callback.

Why bind Matters in Callbacks

When a method is passed as a callback, it loses its object.

bind keeps the connection.

Example

Example

javascript

const counter = {
  count: 0,
  increase: function () {
    this.count++;
    return this.count;
  }
};

const boundIncrease = counter.increase.bind(counter);

console.log(boundIncrease());
console.log(boundIncrease());

Without bind, this.count would not point at the counter.

Borrowing a Method

These methods let one object use a method that belongs to another.

Example

Example

javascript

const ada = { name: "Ada" };
const grace = { name: "Grace" };

function sayName() {
  return this.name;
}

console.log(sayName.call(ada));
console.log(sayName.call(grace));

The same function gives a different answer depending on the object passed in.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript call, apply and bind</title>
</head>
<body>

  <h1>JavaScript call, apply and bind</h1>

  <p id="result"></p>

  <script>
    const person = { name: "Ada" };

    function introduce(city, job) {
      return this.name + " from " + city + ", " + job;
    }

    document.getElementById("result").innerHTML =
      introduce.call(person, "London", "engineer");
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try apply instead:

Replace the call with introduce.apply(person, ["Paris", "writer"]).

Important Points

  • All three let you decide what this means inside a function.
  • call runs the function with arguments listed one by one.
  • apply runs it with arguments in an array.
  • bind returns a new function instead of running it.
  • bind is what keeps a method connected to its object in a callback.

Conclusion

JavaScript call, apply and bind give you direct control over this.

bind is the one you will reach for most, usually when passing methods as callbacks.

Understanding them removes most of the confusion around the this keyword.