Call, Apply, and Bind in JavaScript
JavaScript provides call(), apply(), and bind() methods to explicitly control the value of this inside a function. These methods are extremely useful for function borrowing, callbacks, and controlling context, especially in dynamic code or object-oriented programming.
call() Method
The call() method invokes a function immediately and allows you to set this explicitly for that call.
You can also pass arguments individually.
Syntax:
functionName.call(thisArg, arg1, arg2, ...);
thisArg: The object you wantthisto refer to.arg1, arg2…: Arguments to pass to the function.
Example
function greet(greeting, punctuation) {
console.log(`${greeting}, I am ${this.name}${punctuation}`);
}
const person = { name: "Alice" };
greet.call(person, "Hello", "!");
// Output: Hello, I am Alice!
apply() Method
The apply() method is almost identical to call(), except that it accepts arguments as an array rather than individually.
Syntax:
functionName.apply(thisArg, [arg1, arg2, ...]);
Example
function greet(greeting, punctuation) {
console.log(`${greeting}, I am ${this.name}${punctuation}`);
}
const person = { name: "Bob" };
greet.apply(person, ["Hi", "."]);
// Output: Hi, I am Bob.
Call vs Apply Quick Difference
| Feature | call() | apply() |
|---|---|---|
| Arguments | Passed individually | Passed as an array |
| Execution | Immediately | Immediately |
| Use Case | Normal function calls | When args are in an array |
bind() Method
The bind() method does not invoke the function immediately. Instead, it returns a new function with this bound to the specified object.
It can also preset arguments (partial application).
Syntax:
const boundFunction = functionName.bind(thisArg, arg1, arg2, ...);
Example: Basic Binding
function greet(greeting) {
console.log(`${greeting}, I am ${this.name}`);
}
const person = { name: "Charlie" };
const greetPerson = greet.bind(person);
greetPerson("Hello");
// Output: Hello, I am Charlie
Example: Partial Application with bind()
function multiply(a, b) {
return a * b;
}
const double = multiply.bind(null, 2);
console.log(double(5)); // Output: 10
Practical Use Cases
Borrowing methods from other objects
const person1 = { name: "Alice", age: 25 };
const person2 = { name: "Bob", age: 30 };
function showAge() {
console.log(`${this.name} is ${this.age} years old`);
}
showAge.call(person1); // Alice is 25 years old
showAge.call(person2); // Bob is 30 years old
Event Handlers
const button = document.querySelector("button");
const obj = {
message: "Clicked!",
handleClick() {
console.log(this.message);
}
};
button.addEventListener("click", obj.handleClick.bind(obj));
// 'this' refers to obj instead of the button
Partial Application / Currying
function add(a, b) { return a + b; }
const addFive = add.bind(null, 5);
console.log(addFive(10)); // 15
Summary Table
| Method | Execution | Arguments | Returns | Use Case |
|---|---|---|---|---|
call() | Immediately | Individually | Original function return | Explicit this, normal calls |
apply() | Immediately | Array | Original function return | When args are in array |
bind() | Later | Individually | New bound function | Preserve this, partial application |