JavaScript Function apply()
Method Reuse
Theapply() method lets you write a method that can be used on different objects.
Theapply() method is used to call a function with a specificthis.
Theapply() method is similar tocall(), but it passesarguments in an array.
Note
apply() is an advanced topic.
Make sure you understandthis andcall() before continuing.
Basic apply() Syntax
Theapply() method is used tocall a function with anobject as an argument.
Theapply() method takesthis as the first argument.
The second argument isan array of values passed to the function.
Theapply() method is similar to thecall() method (previous chapter).
Syntax
Using apply() to Setthis
'When you useapply(), you can decide whatthis should refer to.
In the example below, thegreet function returns a greeting +this.name.
When you useapply(), you decide thatthis should be theperson3 object.
Example
const person2 = { name: "Paul" };
const person3 = { name: "Ringo" };
function greet(greeting) {
return greeting + " " + this.name;
}
greet.apply(person3, ["Hello"]);
The Difference Between call() and apply()
The only difference betweenapply() andcall() is how arguments are passed.
Thecall() method takes argumentsseparately.
Theapply() method takes arguments as anarray.
Note
Useapply() when your arguments are already stored in an array.
Example
greet.apply(person, ["Hello"]);
Borrowing a Method from Another Object
You can useapply() toborrow a method from another object:
Example 1
Apply thefullName method ofperson onperson1:
const person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
// Create a person1 Object
const person1 = {
firstName:"John",
lastName: "Doe"
}
// Create a person2 Object
const person2 = {
firstName:"Mary",
lastName: "Doe"
}
// This will return "John Doe":
person.fullName.apply(person1);
Note
In these 2 examples, theapply() method behaves exactly the same as thecall() method.
Example 2
Apply thefullName method ofperson onperson2:
const person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
// Create a person1 Object
const person1 = {
firstName:"John",
lastName: "Doe"
}
// Create a person2 Object
const person2 = {
firstName:"Mary",
lastName: "Doe"
}
// This will return "Mary Doe"
person.fullName.call(person2);
The apply() Method with Arguments
Theapply() method accepts arguments in an array.
All arguments must be placed inside an array, in the correct order.
Example
fullName: function(city, country) {
return this.firstName + " " + this.lastName + "," + city + "," + country;
}
}
const person1 = {
firstName:"John",
lastName: "Doe"
}
person.fullName.apply(person1, ["Oslo", "Norway"]);
Compared with thecall() method:
Example
fullName: function(city, country) {
return this.firstName + " " + this.lastName + "," + city + "," + country;
}
}
const person1 = {
firstName:"John",
lastName: "Doe"
}
person.fullName.call(person1, "Oslo", "Norway");
Simulate Array Methods with apply()
A common use case forapply() is working with Math functions on arrays.
TheMath.max() method returns the highest number in a list of number arguments:
JavaScript Arraysdo not have a max() method, but you cansimulate it with theapply method.
In the example above,null is used asthis, becauseMath.max() doesnot need athis value.
These examples will give the same result:
JavaScript Strict Mode
In JavaScript strict mode, if the first argument of theapply() method is not an object,it becomes the owner (object) of the invoked function.In "non-strict" mode, it becomes the global object.
apply() Does Not Create a New Function
Thecall() method and theapply() method runs the function immediately.
They do not return a new function.
Example
return a + b;
}
sum.apply(null, [4, 5]);
If you want a function that can be called later with the samethis, usebind() instead.
Common Mistakes
Forgetting to Use an Array
The second argument toapply() must be an array.Confusing apply() with bind()
apply() runs immediately.bind() returns a new function.Usingapply() whencall() is Simpler
If you do not have an array,call() is often clearer.
