JavaScript Notes

JavaScript call() vs apply() vs bind() - Complete Comparison Guide

Master JavaScript call vs apply vs bind with side-by-side comparisons, decision rules, real examples, this binding diagrams, and top interview Q&A.

The Big Picture

All three methods — call(), apply(), and bind() — live on Function.prototype and serve the same fundamental purpose: controlling what this means inside a function. Their difference lies in *when* the function runs and *how* you pass arguments.

If you can answer "Do I run it now or later? Do I have separate args or an array?" — you've picked the right method.

Quick Decision Rule

text example

Need to run NOW with individual arguments?   → call()
Need to run NOW with an array of arguments?  → apply()
Need to save for LATER (callbacks/events)?   → bind()

Side-by-Side Syntax

Example

Output

Hello, Riya!
Hello, Riya!
Hello, Riya!

All three produce the same output here — the difference is in timing and argument format.

Complete Comparison Table

Feature	`call()`	`apply()`	`bind()`
Executes immediately	✅ Yes	✅ Yes	❌ No
Returns	Function result	Function result	New bound function
Argument format	`(thisArg, a, b, c)`	`(thisArg, [a, b, c])`	`(thisArg, a, b)` → preset
Changes `this` permanently	❌ No	❌ No	✅ Yes (in new fn)
Works on arrow functions	❌ No	❌ No	❌ No
Partial application	❌ No	❌ No	✅ Yes
Re-bindable	N/A	N/A	❌ No
Called with `new`	N/A	N/A	`this` overridden by `new`
Legacy array-spreading	❌	✅ `apply(null, arr)`	❌
Modern alternative	—	`...spread`	Arrow class fields

Step-by-Step Execution Trace

Using call()

js example

function intro(city, role) {
  return `${this.name} — ${city} — ${role}`;
}
const user = { name: "Aman" };

intro.call(user, "Delhi", "Engineer");

Example

Step 1: intro.call(user, "Delhi", "Engineer") Step 2: this = user → this.name = "Aman" Step 3: city = "Delhi" (first positional arg) Step 4: role = "Engineer" (second positional arg) Step 5: template literal → "Aman — Delhi — Engineer" Step 6: returns result immediately

Output

Aman — Delhi — Engineer

Using apply()

Example

intro.apply(user, ["Delhi", "Engineer"]);

Example

Step 1: intro.apply(user, ["Delhi", "Engineer"]) Step 2: this = user → this.name = "Aman" Step 3: Unpack array: city = "Delhi", role = "Engineer" Step 4: template literal → "Aman — Delhi — Engineer" Step 5: returns result immediately

Output

Aman — Delhi — Engineer

Using bind()

js example

const boundIntro = intro.bind(user, "Delhi");
const result = boundIntro("Engineer");
console.log(result);

Example

Step 1: intro.bind(user, "Delhi") → creates new function `boundIntro` → stores: this=user, preset arg: city="Delhi" → does NOT run yet Step 2: boundIntro("Engineer") → this = user → this.name = "Aman" → city = "Delhi" (from preset) → role = "Engineer" (from call) → returns "Aman — Delhi — Engineer"

Output

Aman — Delhi — Engineer

Execution Context Diagram

Example

┌──────────────────────────────────────────────────────────────┐ │ GLOBAL SCOPE │ │ user = { name: "Riya" } │ │ greet = [Function] │ │ │ │ ┌──────────────────────┐ ┌──────────────────────────────┐ │ │ │ call() / apply() │ │ bind() │ │ │ │ │ │ │ │ │ │ Creates TEMPORARY │ │ Creates PERMANENT bound fn │ │ │ │ execution context │ │ stored in memory │ │ │ │ │ │ │ │ │ │ this → user │ │ boundFn.[[BoundThis]] = user│ │ │ │ ↓ runs immediately │ │ ↓ runs when called later │ │ │ │ ↓ returns result │ │ ↓ returns function result │ │ │ └──────────────────────┘ └──────────────────────────────┘ │ └──────────────────────────────────────────────────────────────┘

Unique Use Cases

When to use call() 📞

js example

// 1. Type checking with Object.prototype.toString
function getType(value) {
  return Object.prototype.toString.call(value);
}

console.log(getType([]));
console.log(getType({}));
console.log(getType(null));

Output

[object Array]
[object Object]
[object Null]

js example

// 2. Constructor chaining
function Animal(name) {
  this.name = name;
}

function Dog(name, breed) {
  Animal.call(this, name); // Inherit Animal's setup
  this.breed = breed;
}

const dog = new Dog("Rex", "Lab");
console.log(dog.name, dog.breed);

Output

Rex Lab

When to use apply() 📦

Example

// 1. Spreading array into function (legacy / ES5) const nums = [3, 7, 1, 9, 4]; console.log(Math.max.apply(null, nums));

Output

js example

// 2. Arguments object conversion
function logAll() {
  const args = Array.prototype.slice.apply(arguments);
  console.log(args.join(", "));
}
logAll("a", "b", "c");

Output

a, b, c

When to use bind() 🔗

Example

// 1. Event handler with correct this class Counter { constructor() { this.value = 0; this.increment = this.increment.bind(this); } increment() { this.value++; console.log(this.value); } } const c = new Counter(); document.getElementById("btn").addEventListener("click", c.increment); // 2. Partial application function power(base, exponent) { return Math.pow(base, exponent); } const square = power.bind(null, 2); // base pre-filled as 2? No — bind fills left to right // Actually: pre-fill base=2 const squareOf = power.bind(null); // no preset const cube = (n) => power(n, 3); // better for partial exponent const double = multiply.bind(null, 2); console.log(double(5));

Output

Common Mistakes — All Three

❌ Mistake 1 — Using call() with an Array (should be apply)

Example

function sum(a, b, c) { return a + b + c; } const nums = [1, 2, 3]; // WRONG sum.call(null, nums); // a = [1,2,3], b = undefined, c = undefined → NaN

Output

NaN

js example

// CORRECT options:
sum.apply(null, nums);
sum.call(null, ...nums);

Output

❌ Mistake 2 — Expecting bind() to Execute

js example

function say() { return `Hello, ${this.name}`; }
const user = { name: "Bob" };

// WRONG — stores function reference, doesn't run it
const result = say.bind(user);
console.log(result);  // Prints function, not "Hello, Bob"

Output

[Function: bound say]

js example

// CORRECT
const result = say.bind(user)();
console.log(result);

Output

Hello, Bob

❌ Mistake 3 — Using any of the three on Arrow Functions for `this`

Example

const arrow = () => `this.name = ${this.name}`; const user = { name: "Riya" }; console.log(arrow.call(user)); console.log(arrow.apply(user)); console.log(arrow.bind(user)());

Output

this.name = undefined
this.name = undefined
this.name = undefined

Arrow functions always capture this from where they were defined. No method can change it.

Full Practical Example — All Three Together

Example

Output

Student: Sneha | Score: 95 | Math: A+
Student: Sneha | Score: 95 | Science: A
Student: Sneha | Score: 95 | English: A

Interview Questions 🎯

Q1. What is the main difference between call(), apply(), and bind()?

	Executes?	Args format	Returns
-	-----------	-------------	---------
`call()`	Immediately	Individual	Result
`apply()`	Immediately	Array	Result
`bind()`	Later (returns fn)	Individual + preset	New function

Q2. When would you use apply() over call()?

Use apply() when your arguments are already stored in an array or array-like object (e.g., arguments, result of a split). call() is for when arguments are individual values. In modern code, call(thisArg, ...array) with spread can replace most apply() calls.

Q3. Can you re-bind a function that's already been bound with bind()?

No. Once a bound function is created, its this is permanent. Any subsequent call(), apply(), or bind() calls on the bound function cannot change this. Only the preset arguments from the first bind can be extended with new args.

Q4. What does bind() return vs call()/apply()?

call() and apply() return the result of the called function
bind() returns a new bound function (a wrapper)

Q5. Does it make sense to use call/apply/bind on arrow functions?

Not for this binding — arrow functions ignore the thisArg parameter entirely. You can still *call* arrow functions via call()/apply(), but this will remain what it was at definition time.

Q6. Which method is safest in modern code?

call() and apply() are equivalent power — choose based on argument format
Modern code often replaces apply() with spread: fn.call(ctx, ...args)
bind() is preferred for callbacks (event handlers, setTimeout, React)
Arrow functions replace bind() in many modern patterns

Q7. What is partial application and how does bind() enable it?

Partial application means creating a function with some arguments pre-filled:

js example

function add(a, b) { return a + b; }
const add5 = add.bind(null, 5); // a = 5 is pre-filled
console.log(add5(3)); // b = 3 → 5 + 3 = 8

Output

Q8. How does call() enable constructor inheritance?

js example

function Vehicle(type) { this.type = type; }
function Car(type, brand) {
  Vehicle.call(this, type); // Inherit Vehicle's properties
  this.brand = brand;
}
const c = new Car("Sedan", "Honda");
console.log(c.type, c.brand);

Output

Sedan Honda

Key Takeaways 🔑

All three methods control this — the difference is when and how
call() → now, args separate → returns result
apply() → now, args as array → returns result
bind() → later, args preset → returns new function
None work on arrow functions for this — lexical this always wins
bind() is irreversible — you cannot rebind a bound function
Modern spread syntax (...) covers most apply() use cases
Arrow functions + class fields often replace bind() in modern code

Summary

call(), apply(), and bind() are three Function.prototype methods that all control the this value inside a function. The decision is straightforward: use call() when you want to run a function immediately with individual arguments; use apply() when you want to run it immediately with arguments in an array; use bind() when you need a new reusable function with this locked in for later. None of these methods work on arrow functions for this binding. In modern JavaScript, spread syntax reduces the need for apply(), and arrow class fields reduce the need for bind() — but understanding all three is essential for deep JavaScript knowledge and interviews.

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for JavaScript call() vs apply() vs bind() - Complete Comparison Guide.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, advanced, call, apply

Continue learning this concept

Advanced JavascriptJavaScript apply() Method - Complete Guide with ExamplesMaster JavaScript apply() method with syntax, this binding, array arguments, function borrowing, real-world use cases, common mistakes, and interview Q&A.Advanced JavascriptJavaScript bind() Method - Complete Guide with ExamplesMaster JavaScript bind() with permanent this binding, partial application, event handlers, currying patterns, common mistakes, and top interview Q&A.Advanced JavascriptJavaScript call() Method - Complete Guide with ExamplesMaster JavaScript call() method: this binding, syntax, constructor inheritance, function borrowing, strict mode differences, and top interview Q&A.Advanced JavascriptJavaScript Currying - Complete Guide with ExamplesLearn JavaScript currying with step-by-step examples, closures, partial application, real-world use cases, common mistakes, and top interview Q&A.Advanced JavascriptJavaScript Debounce - Complete Guide with Timeline DiagramsMaster JavaScript debounce with implementation, timeline diagrams, search input examples, debounce vs throttle comparison, and top interview Q&A.Advanced JavascriptJavaScript Execution Context - Complete Guide with Stack DiagramsMaster JavaScript Execution Context: global, function, eval contexts, call stack, creation vs execution phases, this binding, hoisting, and interview Q&A.

PreviousJavaScript call() Method - Complete Guide with Examples NextJavaScript Currying - Complete Guide with Examples

The Big Picture

Quick Decision Rule

Side-by-Side Syntax

Complete Comparison Table

Step-by-Step Execution Trace

Using call()

Using apply()

Using bind()

Execution Context Diagram

Unique Use Cases

When to use call() 📞

When to use apply() 📦

When to use bind() 🔗

Common Mistakes — All Three

❌ Mistake 1 — Using call() with an Array (should be apply)

❌ Mistake 2 — Expecting bind() to Execute

❌ Mistake 3 — Using any of the three on Arrow Functions for this

Full Practical Example — All Three Together

Interview Questions 🎯

Q1. What is the main difference between call(), apply(), and bind()?

Q2. When would you use apply() over call()?

Q3. Can you re-bind a function that's already been bound with bind()?

Q4. What does bind() return vs call()/apply()?

Q5. Does it make sense to use call/apply/bind on arrow functions?

Q6. Which method is safest in modern code?

Q7. What is partial application and how does bind() enable it?

Q8. How does call() enable constructor inheritance?

Key Takeaways 🔑

Summary

Continue learning this concept

The Big Picture

Quick Decision Rule

Side-by-Side Syntax

Complete Comparison Table

Step-by-Step Execution Trace

Using call()

Using apply()

Using bind()

Execution Context Diagram

Unique Use Cases

When to use call() 📞

When to use apply() 📦

When to use bind() 🔗

Common Mistakes — All Three

❌ Mistake 1 — Using call() with an Array (should be apply)

❌ Mistake 2 — Expecting bind() to Execute

❌ Mistake 3 — Using any of the three on Arrow Functions for this

Full Practical Example — All Three Together

Interview Questions 🎯

Q1. What is the main difference between call(), apply(), and bind()?

Q2. When would you use apply() over call()?

Q3. Can you re-bind a function that's already been bound with bind()?

Q4. What does bind() return vs call()/apply()?

Q5. Does it make sense to use call/apply/bind on arrow functions?

Q6. Which method is safest in modern code?

Q7. What is partial application and how does bind() enable it?

Q8. How does call() enable constructor inheritance?

Key Takeaways 🔑

Summary

Continue learning this concept

❌ Mistake 3 — Using any of the three on Arrow Functions for `this`

❌ Mistake 3 — Using any of the three on Arrow Functions for `this`