Show usage of call, apply bind.
We can use them to implement Method Borrowing, Function Composition and Chaining, Function with Varying Arguments, Setting Context for Callbacks, Using Functions as Constructors.
Function Composition and Chaining: call and apply can be used to chain and compose functions. By setting the context to the result of one function, you can chain another function call to operate on that context.
Method Borrowing: When you have a method defined on one object, but you want to use it on another object that doesn't have that method, you can use call or apply to borrow the method from the first object and execute it in the context of the second object.
Function with Varying Arguments: When a function can accept a variable number of arguments, you can use apply to pass an array-like object as arguments to the function.
Setting Context for Callbacks: When you pass a function as a callback to another function, the context can change. Using bind, we can ensure that the callback function maintains the desired context.
Using Functions as Constructors: In JavaScript, functions can be used as constructors to create objects. call and apply can be used to set the newly created object as the context while initializing properties.
Scenario Questions
0-2 years experience
- 1We have a simple utility function that logs a message with a prefix. How would you use .call to invoke it with a specific prefix object?
- 2Given a function sum(a, b, c) that returns a + b + c, show how you would use .apply to pass an array of numbers [1, 2, 3] as arguments.
2-5 years experience
- 1Our codebase has a generic fetchData(callback) that expects `this` to be a request object. It started throwing 'undefined is not a function' after a refactor. How would you use .call or .apply to fix the context?
- 2We need to debounce a method of a class but preserve the original `this`. Explain how you would use .bind in this scenario and why .bind is preferable to an arrow function here.
5-8 years experience
- 1A high‑traffic service creates many bound functions inside a loop, leading to memory pressure. How would you redesign the code to avoid unnecessary .bind calls while still preserving context?
- 2When integrating a third‑party library that expects callbacks with a specific `this`, you need to wrap several methods. Discuss trade‑offs between using .bind once versus using .call/.apply at each call site, considering performance and testability.
8+ years experience
- 1Our monorepo is migrating from ES5 to ES6 modules, and we have legacy code that heavily relies on .call/.apply for method borrowing across services. What architectural strategy would you propose to phase out these patterns while keeping backward compatibility?
- 2In a micro‑frontend architecture, different teams expose UI components that need to share a common utility object via .call/.apply. How would you design a shared context layer to avoid tight coupling and ensure type safety across teams?
Follow-up Questions
- What would happen if you called .call without providing a this value?
- Can you compare the performance impact of using .bind versus an arrow function for preserving context?
- How would you write a unit test to verify that the bound function receives the intended this?