- Home
- /
- Tutorials
- /
- JavaScript Tutorial
- /
- JavaScript call, apply and bind
JavaScript Functions
JavaScript call, apply and bind
JavaScript
call,applyandbindlet you choose what thethiskeyword 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
thismeans inside a function. callruns the function with arguments listed one by one.applyruns it with arguments in an array.bindreturns a new function instead of running it.bindis 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.
