call, apply & bind

The plain-language idea

this is normally decided by how a function gets called. call, apply, and bind let you decide it yourself instead — you hand the function a this value explicitly.

const user = { name: "Ada" };
function greet(greeting) {
  return `${greeting}, ${this.name}`;
}

greet.call(user, "Hi");     // "Hi, Ada" — calls now, this = user
greet.apply(user, ["Hi"]);  // same, but args as an array

const boundGreet = greet.bind(user);
boundGreet("Hi");           // "Hi, Ada" — this is now permanently user

call and apply both invoke the function immediately with a chosen this — they only differ in how you pass the remaining arguments (comma-separated vs an array). bind is different: it doesn't call the function — it returns a new function with this permanently locked, to be called whenever you're ready.

greet.call(user, "Hi") — runs greet RIGHT NOW, with this set to user, args comma-separated.

BackNext

What people usually miss

Watch out

• bind doesn't call the function — fn.bind(obj) returns a new function; you still have to call that. Forgetting this is a common source of "why didn't this run" bugs.
• This is the fix for the classic "detached method" bug: const click = button.onClick; click() loses this (it becomes undefined in strict mode). button.onClick.bind(button) is the direct fix — arrow functions and class fields solve the same problem differently, by never having their own this to lose.
• Arrow functions ignore call/apply/bind's this argument entirely — they don't have their own this to override, so passing one has no effect.

Why this matters in interviews

"Implement your own bind" is a real, common exercise — it forces you to prove you understand that bind both fixes this and returns a new callable function, not just one of the two.