Q105: call, apply, bind and Function Invocation

What Interviewers Want To Evaluate

This question tests whether you understand explicit function invocation and how JavaScript controls this and arguments. Interviewers want call, apply, bind, partial application, method borrowing, callback binding, constructor interaction, arrow limitations, and practical trade-offs.

Senior engineers should connect these APIs to real callback and library behavior, not only syntax.

Short Interview Answer

call, apply, and bind are Function prototype methods used to control invocation. call invokes a function immediately with a chosen this and arguments listed individually. apply invokes immediately with a chosen this and arguments as an array-like value. bind does not invoke immediately; it returns a new function with this and optionally some arguments pre-bound. These APIs work on normal functions, but arrow functions do not have their own this to rebind.

Detailed Interview Answer

These APIs exist because normal JavaScript functions can be invoked with an explicit this.

The quick comparison is:

fn.call(thisArg, a, b)
fn.apply(thisArg, [a, b])
const bound = fn.bind(thisArg, a)
bound(b)

call

call invokes the function immediately. The first argument is the this value. Remaining arguments are passed to the function.

function greet(prefix) {
  return `${prefix} ${this.name}`;
}

greet.call({ name: "Asha" }, "Hi"); // "Hi Asha"

apply

apply is similar to call, but arguments are passed as an array or array-like object.

const numbers = [2, 8, 4];
Math.max.apply(null, numbers); // 8

Modern code often uses spread syntax instead:

Math.max(...numbers);

bind

bind returns a new function. It can lock this and optionally pre-fill arguments.

const greetAsha = greet.bind({ name: "Asha" }, "Hello");
greetAsha(); // "Hello Asha"

This is useful when passing functions as callbacks.

Partial Application

bind can pre-fill some arguments. This is a form of partial application.

function multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2);
double(5); // 10

Method Borrowing

call and apply can borrow methods from one object for another object when the method relies on compatible structure.

This pattern appears in older JavaScript, though modern APIs and spread syntax have replaced many uses.

Arrow Functions

Arrow functions ignore attempts to bind this because they use lexical this.

You can still pass arguments, but this will not be changed by call, apply, or bind.

Constructor Interaction

Bound functions can still be used with new in some cases, and constructor binding has special rules. For interviews, it is usually enough to say that bind permanently sets this for normal calls, but new has its own constructor behavior.

Avoid relying on confusing bound-constructor behavior in application code.

Common Mistakes

A common mistake is saying bind calls the function immediately. It does not.

Another mistake is using apply for arrays when spread syntax is clearer in modern JavaScript.

Senior Trade-Offs

Explicit binding is powerful but can make code harder to read if overused. In modern code, passing explicit parameters or using closures is often clearer.

Still, these APIs matter for libraries, callbacks, legacy code, and interview reasoning.

Code or Design Example

const logger = {
  prefix: "app",
  write(message) {
    console.log(`[${this.prefix}] ${message}`);
  },
};

setTimeout(logger.write.bind(logger, "ready"), 0);

Without bind, logger.write would lose its object call site when passed to setTimeout.

Production Example

In older class-based React, event handlers often needed binding:

this.handleClick = this.handleClick.bind(this);

This ensured the method saw the component instance as this when passed as a callback.

Debugging Workflow

When a function has wrong this or arguments:

check whether it was called directly
check whether it was passed as callback
check whether bind was used
check whether the function is arrow
check whether call/apply arguments match
check whether spread syntax would be clearer

Interview Framing

Give a crisp syntax comparison, then use a callback example. The callback example proves you understand why these APIs matter.

Avoid turning the answer into obscure trivia unless the interviewer asks.

Revision Notes

call and apply invoke immediately. bind returns a new bound function. Arrow functions cannot have this rebound.

Key Takeaways

These APIs are explicit invocation tools. They matter most when a function’s call site would otherwise lose the desired this.

Follow-Up Questions

1. What is the difference between call and apply?
2. What does bind return?
3. Does bind invoke immediately?
4. How does spread syntax replace some apply usage?
5. Can arrow functions be rebound?
6. What is partial application?
7. What is method borrowing?
8. Why do callbacks lose this?
9. How did class React use bind?
10. When should you avoid these APIs?

How I Would Answer This In A Real Interview

I would compare syntax first: call invokes with individual args, apply invokes with an args array, and bind returns a function for later. Then I would explain callback binding, partial application, arrow limitations, and modern alternatives like spread syntax or closures.