JavaScript call() vs apply() – What’s the Difference?

JavaScript provides multiple ways to invoke functions, especially when you want to control the context (this) in which a function executes. Two commonly used methods for this are call() and apply(). Though they serve a similar purpose, they differ in syntax and how arguments are passed.

In this blog post, we’ll explore the difference between call() and apply() in JavaScript, with clear examples and practical use cases.

🧠 What is the call() Method in JavaScript?

The call() method calls a function with a specified this value and individual arguments.

Syntax:

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

Example:

function greet(greeting, punctuation) {
  console.log(`${greeting}, ${this.name}${punctuation}`);
}

const user = { name: 'Alice' };

greet.call(user, 'Hello', '!');

Output:

Hello, Alice!

Here, greet is called with this pointing to the user object.

---

🧠 What is the apply() Method in JavaScript?

The apply() method is very similar to call(), but it takes arguments as an array instead of a comma-separated list.

Syntax:

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

Example:

greet.apply(user, ['Hi', '?']);

Output:

Hi, Alice?

---

🔍 Key Difference Between call() and apply()

Feature	call()	apply()
Argument format	Comma-separated	Array
Use case	Known number of arguments	Dynamic number of arguments
Performance	Virtually same	Virtually same

---

🚀 When to Use call() vs apply()

• ✅ Use call() when you know the exact number of arguments.
• ✅ Use apply() when arguments are already in an array or you’re working with variadic functions.

Real-world example with Math.max:

const numbers = [5, 2, 9, 1];
const max = Math.max.apply(null, numbers);
console.log(max); // 9

In modern JavaScript, you can replace apply() with the spread operator:

const maxModern = Math.max(...numbers);

---

🧪 Bonus: Function Borrowing

Both call() and apply() allow function borrowing, letting one object use a method belonging to another.

const person = { name: 'John' };
const another = {
  name: 'Doe',
  sayHello() {
    console.log(`Hello, ${this.name}`);
  }
};

another.sayHello.call(person); // Hello, John

---

🔚 Conclusion

Both call() and apply() let you control function context (this) dynamically. The main difference lies in how arguments are passed:

• call() uses a comma-separated list.
• apply() uses an array.

Understanding this difference helps you write more flexible, reusable code — especially when working with dynamic argument lists or borrowing methods.

---