Codectionary / Developer documentation / JavaScript

Explicit Receivers with call, apply, and bind

call and apply invoke an ordinary function with an explicit this value; apply accepts an array-like argument list. bind creates a new function with a fixed receiver and optional leading arguments. Arrow functions capture this lexically, so these methods cannot replace an arrow’s receiver.

Syntax

fn.call(receiver, argument);
fn.apply(receiver, [argument]);
const bound = fn.bind(receiver);

Examples

Explicit Receivers with call, apply, and bind: working example

Run this standalone example in a modern browser console unless another environment is specified. Expected result: Logs are Hello Ada!, User: Ada., and Welcome Ada!.

function label(prefix, suffix) {
  return `${prefix}${this.name}${suffix}`;
}
const user = { name: "Ada" };
console.log(label.call(user, "Hello ", "!"));
console.log(label.apply(user, ["User: ", "."]));
const greet = label.bind(user, "Welcome ");
console.log(greet("!"));
  1. Expected result: Logs are Hello Ada!, User: Ada., and Welcome Ada!.
  2. call supplies separate arguments while apply takes an argument list.
  3. bind stores both the user receiver and the leading prefix for later calls.

Best practices

  • Bind a callback once if its identity matters for later removal.
  • Prefer explicit parameters when a function does not need receiver-based behavior.

Runtime & versions

Browsers and JavaScript runtimes. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

ECMAScript specification

Specifications & further reading