call() vs apply() vs bind() in JavaScript
The call(), apply(), and bind() methods allow you to change the runtime binding of a function's this keyword from the function's lexical object to a different object of your choice.
This article will show you how to use the three methods to reassign any function (or method) from one object to another.
Let's begin by understanding how method reassignment works.
How Does Method Reassignment Work?
By default, the owner (lexical context) of a method is the object encasing it.
For instance, consider this code:
// First object:
const firstName = {
myName: "Oluwatobi",
showMyName: function () {
console.log(this.myName);
},
};
// Second object:
const lastName = {
myName: "Sofela",
};
// Invoke showMyName:
firstName.showMyName();
// The invocation above will return: "Oluwatobi"
In the snippet above, the showMyName() method's default owner is the firstName object because firstName is the container housing showMyName().
Therefore, when firstName.showMyName() got invoked, showMyName's this keyword referenced firstName.
But how can we make showMyName's this keyword reference lastName instead? Should we redefine showMyName in lastName?
Well, this is precisely where method reassignment comes in handy.
call(), apply(), and bind() allows you to create a method once and reuse it in different other objects—without rewriting the method.
So, for instance, instead of redefining showMyName in lastName, you can simply use either call(), apply(), or bind() to reassign showMyName to lastName like so:
// First object:
const firstName = {
myName: "Oluwatobi",
showMyName: function () {
console.log(this.myName);
},
};
// Second object:
const lastName = {
myName: "Sofela",
};
// Invoke showMyName:
firstName.showMyName.apply(lastName);
// The invocation above will return: "Sofela"
In the snippet above, we used apply() to reassign showMyName to lastName.
Consequently, when firstName.showMyName.apply(lastName) got invoked, showMyName's this keyword referenced lastName.
Therefore, firstName.showMyName.apply(lastName)'s invocation correctly returned "Sofela".
So how exactly does the method call(), apply(), and bind() work?
Let's find out by taking a closer look at each method, starting with call().
What Is the call() Method?
call() is one of JavaScript's built-in methods that you can use to reassign a specific method from one object to a different one.
Here's an example:
// Create a method inside an object:
const myFullName = {
fullName: function () {
console.log(`${this.firstName} ${this.lastName}`);
},
};
// Create an object with two properties:
const myNames = {
firstName: "Oluwatobi",
lastName: "Sofela",
};
// Invoke the fullName() method as a method of myNames object:
myFullName.fullName.call(myNames);
// The invocation above will return: "Oluwatobi Sofela"
In the snippet above, "Oluwatobi Sofela" returned because we used call() to assign fullName() to myNames.
Use CSS Grid like a pro
Therefore, fullName()'s this keyword referenced myNames object.
For simplicity, you can read myFullName.fullName.call(myNames) as:
"In myFullName object, get the fullName method and call it inside myNames object."
So now that you know what call() is, we can talk about its syntax.
call()'s syntax
call() accepts one or more optional arguments.
call(objectToReceiveMethod, val1, val2, ..., valN)
The first argument you pass into call() will refer to the object you want to assign a method.
If you specify any additional arguments, call() will read them as the parameter values you wish to pass to the method you are reusing.
For instance, consider the code below:
// Create a method inside an object:
const myBio = {
aboutComp: function (age, website) {
console.log(
`${this.firstName} ${this.lastName}'s website (${website}) is ${age} ${
age > 1 ? "years" : "year"
} old.`
);
},
};
// Create an object with two properties:
const myNames = {
firstName: "Oluwatobi",
lastName: "Sofela",
};
// Invoke the aboutComp() method as a method of myNames object while passing two arguments to aboutComp():
myBio.aboutComp.call(
myNames,
new Date().getFullYear() - 2020,
"www.codesweetly.com"
);
// The invocation above will return: "Oluwatobi Sofela's website (www.codesweetly.com) is ... old."
In the snippet above, we passed three arguments to the call() method.
The first argument (myNames) is the object to which we want to assign aboutComp.
The other two arguments (new Date().getFullYear() - 2020 and "www.codesweetly.com") are the parameter values we want to pass to aboutComp.
call() automatically invokes the method on which you used it.
Let's now see how apply() works.
What Is the apply() Method?
apply() is one of JavaScript's built-in methods that you can use to reassign a specific method from one object to a different one.
apply() does the same thing as call(). The core difference between the two methods is that apply() accepts only two arguments. In contrast, call() takes as many arguments as you need.
Let's take a closer look at its syntax.
apply()'s syntax
apply() accepts only two arguments. The first is required, while the second is optional.
apply(objectToReceiveMethod, [val1, val2, ..., valN])
The first argument apply() accepts is the object you wish to assign a specified method.
The second argument is the array of values you wish to pass into the method you are reusing.
Here's an example:
// Create a method inside an object:
const myBio = {
aboutComp: function (age, website) {
console.log(
`${this.firstName} ${this.lastName}'s website (${website}) is ${age} ${
age > 1 ? "years" : "year"
} old.`
);
},
};
// Create an object with two properties:
const myNames = {
firstName: "Oluwatobi",
lastName: "Sofela",
};
// Invoke the aboutComp() method as a method of myNames object while passing an array of two items to aboutComp():
myBio.aboutComp.apply(myNames, [
new Date().getFullYear() - 2020,
"www.codesweetly.com",
]);
// The invocation above will return:
// "Oluwatobi Sofela's website (www.codesweetly.com) is ... old."
In the snippet above, we passed in two arguments to the apply() method.
Learn CSS Grid with Images
The first argument (myNames) is the object to which we want to assign aboutComp.
The second argument ([new Date().getFullYear()—2020, "www.codesweetly.com"]) is the array we want to pass to aboutComp.
For simplicity, you can read myBio.aboutComp.apply(myNames, [new Date().getFullYear() - 2020, "www.codesweetly.com"]) as:
"In myBio object, get the aboutComp method and apply it in myNames object while using [new Date().getFullYear() - 2020, "www.codesweetly.com"] as aboutComp's argument."
apply()is handy if you wish to use an array of arguments instead of an argument list.- The
apply()method accepts only a single array. apply()automatically invokes the method on which you used it.
Let's now see how bind() works.
What Is the bind() Method?
bind() is one of JavaScript's built-in methods that you can use to reassign a specific method from one object to a different one.
bind() does the same thing as call(). The main difference is that bind() does not automatically invoke the method on which it got used. Instead, it only binds (assigns) the method to the new object.
In contrast, call() automatically invokes the method on which you used it.
Let's take a closer look at its syntax.
bind()'s syntax
bind() accepts one or more optional arguments.
bind(objectToReceiveMethod, val1, val2, ..., valN)
The first argument you pass into bind() will refer to the object to which you want to assign a method.
If you specify any other arguments, bind() will read them as the parameter values you wish to pass to the method you are reusing.
Here's an example:
// Create a method inside an object:
const myBio = {
aboutComp: function(age, website) {
console.log(
`${this.firstName} ${this.lastName}'s website (${website}) is ${age} ${age > 1 ? "years" : "year"} old.`
);
}
};
// Create an object with two properties:
const myNames = {
firstName: "Oluwatobi",
lastName: "Sofela"
};
// Invoke the aboutComp() method as a method of myNames object while passing two arguments to aboutComp():
myBio.aboutComp.bind(
myNames,
new Date().getFullYear() - 2020,
"www.codesweetly.com"
);
// The invocation above will return:
ƒ (age, website) {
console.log(
`${this.firstName} ${this.lastName}'s website (${website}) is ${age} ${age > 1 ? "years" : "year"} old.`
);
}
Notice that bind() returned the aboutPal() function—without invoking it. The invocation did not happen because bind()—unlike call()—does not automatically invoke the method on which you used it.
If you want bind() to invoke the method, you must explicitly instruct it to do so by placing a set of parentheses () after the bind command like so:
myBio.aboutComp.bind(
myNames,
new Date().getFullYear() - 2020,
"www.codesweetly.com"
)();
// The invocation above will return:
// "Oluwatobi Sofela's website (www.codesweetly.com) is ... old."
For simplicity, you can read myBio.aboutComp.bind(myNames, new Date().getFullYear() - 2020, "www.codesweetly.com") as:
"In myBio object, get the aboutComp method and bind it in myNames object while using new Date().getFullYear()—2020 and "www.codesweetly.com" as aboutComp's arguments."
bind() is handy if you wish to reassign a specific method from one object to another without immediately invoking the method.
Overview
This article discussed how to use call(), apply(), and bind() to reassign any JavaScript function (or method) from one object to a different one.
Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.
Join CodeSweetly Newsletter