How this Changes With call, apply, and bind in JavaScript

How this Changes With call, apply, and bind in JavaScript

JavaScript lets you explicitly set this when calling a function. The three tools for this are call, apply, and bind.

call

Invokes the function immediately with a specified this and comma-separated arguments:

function greet(greeting, punctuation) {
  console.log(`${greeting}, ${this.name}${punctuation}`);
}
const user = { name: "Kunal" };
greet.call(user, "Hello", "!"); // "Hello, Kunal!"

apply

Same as call but takes arguments as an array:

greet.apply(user, ["Hi", "."]); // "Hi, Kunal."

Use apply when you already have arguments in an array (or array-like). With spread, call with ...args works too, so apply is less necessary in modern code.

bind

Returns a new function with this permanently bound (and optional preset arguments):

const boundGreet = greet.bind(user, "Hey");
boundGreet("?"); // "Hey, Kunal?"

bind does not invoke immediately. The bound function can be called later, and this stays fixed. Re-binding a bound function has no effect.

Common Use Cases

• Borrowing methods: Array.prototype.slice.call(arguments) to convert array-like to array.
• Callbacks that need this: setTimeout(obj.method.bind(obj), 1000).
• Partial application: const add5 = add.bind(null, 5) to preset an argument.

Arrow Functions Ignore Them

call, apply, and bind cannot change an arrow function's this:

const arrow = () => console.log(this);
arrow.call({ name: "X" }); // this is still the lexical this

Precedence

new > bind > call/apply > method call > plain call. A bind-bound function called with new uses the new object as this (the bind is ignored for this, but preset args remain).

The Takeaway

call and apply invoke immediately with a specific this (comma vs array args). bind returns a new function with this permanently bound. Use them for borrowing methods, fixing callbacks, and partial application. Arrows ignore all three.