Exploring call, apply, and bind in JavaScript

Aakash

May 26, 2025

JavaScript provides three powerful methods—call(), apply(), and bind()—that let you control the value of this inside functions. These tools are especially useful for method borrowing, setting explicit contexts, and handling arguments flexibly. Let’s break down how each works, with practical examples.

Why Use These Methods?

The value of this in JavaScript functions depends on how the function is invoked, which can sometimes cause confusion or unexpected behavior. call(), apply(), and bind() let you directly specify what this should refer to when a function runs.

`call()` Method

What it does: Executes a function immediately, setting this to the first argument and passing the rest as individual parameters.

Syntax:


js
functionName.call(thisArg, arg1, arg2, ...)

Example:


js
function introduce(age) {
  console.log(`My name is ${this.name} and I am ${age} years old.`);
}
const user = { name: "Sam" };
introduce.call(user, 25); // Output: My name is Sam and I am 25 years old.

When to use: When you want to use a function as if it belonged to another object.

`apply()` Method

What it does: Similar to call(), but takes arguments as an array.

Syntax:


js
functionName.apply(thisArg, [arg1, arg2, ...])

Example:


js
function add(a, b) {
  return a + b;
}
const numbers = [3, 7];
console.log(add.apply(null, numbers)); // Output: 10

When to use: When you already have arguments in an array and want to pass them to a function.

`bind()` Method

What it does: Returns a new function with this set to the provided value. The function is not executed immediately.

Syntax:


js
const newFunc = functionName.bind(thisArg, arg1, arg2, ...)

Example:


js
function greet(greeting, mark) {
  console.log(`${greeting}, ${this.name}${mark}`);
}
const person = { name: "Alex" };
const greetAlex = greet.bind(person, "Hello");
greetAlex("!"); // Output: Hello, Alex!

When to use: When you need a function with a fixed this value, such as for event handlers or callbacks.

Comparison Table

Method	Executes Immediately	How Arguments Are Passed	Returns New Function	Typical Use Case
call()	Yes	Individually	No	Method borrowing
apply()	Yes	As an array	No	Passing arguments as an array
bind()	No	Individually (preset)	Yes	Event handlers, callbacks

Key Insights

All three methods allow you to define what this refers to inside a function.
call() and apply() execute the function right away, while bind() creates a new function for later use.
Arrow functions are not affected by these methods, as they inherit this from their surrounding scope.

Practical Uses

Event Handlers: Keep the correct this in callbacks.
Method Borrowing: Use a method from one object on another.
Partial Application: Pre-fill some arguments in advance using bind().

Conclusion

Knowing how to use call(), apply(), and bind() gives you more control over function execution and context in JavaScript, leading to code that is easier to understand and maintain

yourinfolabs