call, apply and bind

By the end, you can explicitly set this for a JavaScript function using call, apply, or bind, and choose the right one for immediate calls, array arguments, or reusable functions.

What it is

In JavaScript, this is determined by how a function is called, not where it is defined. call, apply, and bind let you control that value explicitly. They are methods on Function.prototype.

call invokes a function immediately with a chosen this and individual arguments. apply invokes immediately with a chosen this and an array-like list of arguments. bind returns a new function with a chosen this, and optional preset arguments, that can be called later.

Related terms: execution context, this binding, first-class functions, higher-order functions.

Why it matters

• Reuse object methods on other objects without copying code.
• Pass functions as callbacks while preserving the intended this.
• Convert array-like arguments into function parameters, such as Math.max.apply(null, numbers).
• Create reusable event handlers or partial applications.
• Make code clearer when this would otherwise be lost.

Syntax or steps

1. Choose the function you want to run.
2. Choose the object that should become this.
3. Use call for immediate execution with separate arguments: fn.call(thisArg, arg1, arg2).
4. Use apply for immediate execution with an array-like argument list: fn.apply(thisArg, argsArray).
5. Use bind when you need a new function to call later: const bound = fn.bind(thisArg, presetArg).

Example

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

const guest = { name: "Grace" };

// call: immediate, separate arguments
console.log(user.greet.call(guest, "Hello"));

// apply: immediate, arguments as array
console.log(user.greet.apply(guest, ["Hi"]));

// bind: returns a reusable function
const bound = user.greet.bind(guest);
console.log(bound("Welcome"));

// bind with preset arguments
const welcomeGuest = user.greet.bind(guest, "Welcome");
console.log(welcomeGuest());

• user.greet.call(guest, "Hello") runs greet immediately with this set to guest.
• user.greet.apply(guest, ["Hi"]) does the same, but passes arguments as an array.
• const bound = user.greet.bind(guest) creates a new function with this fixed to guest.
• bound("Welcome") calls the saved function later.
• user.greet.bind(guest, "Welcome") presets the first argument, so welcomeGuest() needs no arguments.

Common mistakes

• Forgetting that bind does not call the function. It returns a new function; you must call it later.
• Using apply with separate arguments instead of an array-like list.
• Assuming this inside a bound function can be changed by call or apply. Once bound, the first argument to bind is fixed unless the function is used as a constructor.
• Using call or apply on arrow functions expecting to change this. Arrow functions do not have their own this; they inherit it from the surrounding scope.

When to use it

Use call when you need to invoke a function now with a specific this and normal arguments. Use apply when the arguments are already in an array or array-like object. Use bind when you need to save a function with a fixed this for later, such as a callback or event handler.

Practice

Guided exercise: Create an object team with a method announce that returns this.name and a message. Use call to run it with a different object.

const team = {
  name: "Blue",
  announce: function (message) {
    return `${this.name}: ${message}`;
  }
};

const other = { name: "Red" };
console.log(team.announce.call(other, "Ready"));

Expected output: Red: Ready.

Challenge: Use bind to create a reusable function that always announces for other with the preset message Go.

Solution hint: const go = team.announce.bind(other, "Go"); console.log(go());

Quick check

Question: Which method should you use if you already have arguments in an array and want to call the function immediately?

Answer: apply.

Summary

call, apply, and bind are tools for explicit this control. call and apply run a function now, while bind creates a reusable function with a fixed this. Choose based on whether you need immediate execution, array arguments, or a saved callback.