Advertisement
In JavaScript, call, apply, and bind are methods that allow you to control the context (this value) in which a function is executed. While their purposes are similar, they differ in how they handle arguments and when the function is invoked.
---
#### call
- Description:
The call() method invokes a function immediately, allowing you to specify the value of this and pass arguments individually (comma-separated).
- Syntax:
1func.call(thisArg, arg1, arg2, ...)- Example:
1var employee1 = { firstName: "John", lastName: "Rodson" };
2
3var employee2 = { firstName: "Jimmy", lastName: "Baily" };
4
5function invite(greeting1, greeting2) {
6
7console.log(
8 greeting1 + " " + this.firstName + " " + this.lastName + ", " + greeting2
9);
10}
11
12invite.call(employee1, "Hello", "How are you?"); // Hello John Rodson, How are you?
13
14invite.call(employee2, "Hello", "How are you?"); // Hello Jimmy Baily, How are you?---
#### apply
- Description:
The apply() method is similar to call(), but it takes the function arguments as an array (or array-like object) instead of individual arguments.
- Syntax:
1func.apply(thisArg, [argsArray])- Example:
1var employee1 = { firstName: "John", lastName: "Rodson" };
2
3var employee2 = { firstName: "Jimmy", lastName: "Baily" };
4
5function invite(greeting1, greeting2) {
6
7console.log(
8 greeting1 + " " + this.firstName + " " + this.lastName + ", " + greeting2
9);
10}
11
12invite.apply(employee1, ["Hello", "How are you?"]); // Hello John Rodson, How are you?
13
14invite.apply(employee2, ["Hello", "How are you?"]); // Hello Jimmy Baily, How are you?---
#### bind
- Description:
The bind() method creates a new function with a specific this value and, optionally, preset initial arguments. Unlike call and apply, bind does not immediately invoke the function; instead, it returns a new function that you can call later.
- Syntax:
1var boundFunc = func.bind(thisArg[, arg1[, arg2[, ...]]])- Example:
1var employee1 = { firstName: "John", lastName: "Rodson" };
2
3var employee2 = { firstName: "Jimmy", lastName: "Baily" };
4
5function invite(greeting1, greeting2) {
6
7console.log(
8 greeting1 + " " + this.firstName + " " + this.lastName + ", " + greeting2
9);
10}
11
12var inviteEmployee1 = invite.bind(employee1);
13
14var inviteEmployee2 = invite.bind(employee2);
15
16inviteEmployee1("Hello", "How are you?"); // Hello John Rodson, How are you?
17
18inviteEmployee2("Hello", "How are you?"); // Hello Jimmy Baily, How are you?---
#### Summary
| Method | Invokes Function Immediately? | How Arguments Are Passed | Returns |
|--------|-------------------------------|----------------------------------|--------------|
| call | Yes | Comma-separated list | Function's result |
| apply| Yes | Array or array-like object | Function's result |
| bind | No | (Optional) preset, then rest | New function |
---
## Key Points
- call and apply are almost interchangeable; both invoke the function immediately, but differ in how arguments are passed.
- _Tip:_ "Call is for Comma-separated, Apply is for Array."
- bind does not execute the function immediately. Instead, it creates a new function with the specified this value and optional arguments, which can be called later.
- Use call or apply when you want to immediately invoke a function with a specific this context. Use bind when you want to create a new function with a specific this context to be invoked later.
---
Advertisement
JavaScript Coding Exercise 4
Test your knowledge with this interactive coding challenge.
Start CodingAdvertisement