call, apply, and bind in JavaScript Explained

call, apply, and bind in JavaScript Explained

call, apply, and bind let you set this explicitly when calling a function.

call

Invokes immediately with 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 arguments as an array:

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

bind

Returns a new function with this permanently bound:

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

bind does not invoke immediately. The bound function can be called later. Re-binding has no effect.

Common Use Cases

• Borrowing methods: Array.prototype.slice.call(arguments).
• Fixing this in callbacks: setTimeout(obj.method.bind(obj), 1000).
• Partial application: const add5 = add.bind(null, 5).

Arrow Functions Ignore Them

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

The Takeaway

call: invoke with this and comma args. apply: same but array args. bind: return a new function with this bound. Use for borrowing methods, fixing this in callbacks, and partial application. Arrows ignore all three.