call, apply & bind

call-apply-bindinterview-questionscallapplybind

Saved on this device

Full lesson · 8 learning steps Open any exercise for focused practice

Step 1 of 8 · intro card

Learn call, apply & bind

this & Binding

call and apply invoke a function immediately with an explicit this; call takes comma-separated args while apply takes an array. bind does not invoke — it returns a new function permanently bound to a this, and call enables method borrowing like Array.prototype.slice.call(arguments).

All three set this explicitly. fn.call(thisArg, a, b) invokes the function right away with this set to thisArg and the rest of the arguments passed individually. fn.apply(thisArg, [a, b]) is identical except it takes the arguments as a single array — remember "a for array".

fn.bind(thisArg) is different: it does not invoke anything. It returns a brand-new function whose this is permanently fixed to thisArg, so later calls — even as a detached callback — keep that this. Any extra arguments to bind are partially applied to the front.

Because call and apply let you supply this, you can borrow methods from other objects. Array.prototype.slice.call(arguments) runs Array's slice with the array-like arguments object as its this, producing a real array. The same trick works for Array.from-style conversions and Math.max.apply(null, nums).

call/apply invoke now; bind returns a new function.

call takes comma args; apply takes an array.

call/apply enable method borrowing.

const greet = function (greeting) { return greeting + " " + this.name; };
const user = { name: "Ann" };
greet.call(user, "Hi");      // comma args -> "Hi Ann"
greet.apply(user, ["Hey"]);  // array args -> "Hey Ann"
const sayHi = greet.bind(user); // returns a new bound function
sayHi("Yo");                 // -> "Yo Ann"
const args = Array.prototype.slice.call(arguments); // borrow slice

Read the implementation

Connect each part of the code to the concept before you type.

1. call: comma args

call invokes immediately, setting this to user and passing the remaining arguments one by one.

greet.call(user, "Hi");      // comma args -> "Hi Ann"

2. apply: array args

apply works like call but takes its arguments as a single array, handy when they are already collected.

greet.apply(user, ["Hey"]);  // array args -> "Hey Ann"

3. bind returns a function

bind does not call the function; it returns a new function permanently locked to the given this.

const sayHi = greet.bind(user); // returns a new bound function

4. Calling the bound fn

The function returned by bind keeps its this no matter how it is later invoked.

sayHi("Yo");                 // -> "Yo Ann"

5. Method borrowing

Borrowing slice via call turns the array-like arguments object into a real array.

Array.prototype.slice.call(arguments); // borrow slice

A complete learning loop

Understand

Read the concept map and follow the code breakdown.

Reconstruct

Type the implementation, repair mistakes and work through every recall exercise.

Verify

Use the final check without hints; revisit weak concepts in short practice sessions.