JS call apply bind

call, apply, and bind let you choose what this means when a function runs, like lending a tool to a different person. call and apply run it right away, while bind makes a new ready-to-use version.

In this page:

call()
apply()
bind()
Main Difference
Practice

Syntax

javascript

functionName.call(thisValue, arg1, arg2);
functionName.apply(thisValue, [arg1, arg2]);
const bound = functionName.bind(thisValue);

call()

call() runs a function immediately and lets you set its this value. Arguments are passed one by one.

This makes call() convenient when you already know the exact number of arguments a function needs and want to invoke it with a specific this value right away.

Example: call()

javascript

// Define the function `greet` taking `greeting`
// Define the function `greet` taking `greeting`
function greet(greeting) {
  // Print `greeting + ", " + this.name` to the console
  // Print `greeting + ", " + this.name` to the console
  console.log(greeting + ", " + this.name);
}
// Declare the constant `user`, set to `{ name: "Sam" }`
// Declare the constant `user`, set to `{ name: "Sam" }`
const user = { name: "Sam" };
// Call `greet.call(user, "Hello")`
// Call `greet.call(user, "Hello")`
greet.call(user, "Hello");

apply()

apply() is like call(), but it receives function arguments in an array. apply() is especially useful when you have arguments already collected in an array (or array-like object) and don't want to spread them out manually.

Example: apply()

javascript

// Define the function `greet` taking `greeting`
// Define the function `greet` taking `greeting`
function greet(greeting) {
  // Print `greeting + ", " + this.name` to the console
  // Print `greeting + ", " + this.name` to the console
  console.log(greeting + ", " + this.name);
}
// Declare the constant `user`, set to `{ name: "Sam" }`
// Declare the constant `user`, set to `{ name: "Sam" }`
const user = { name: "Sam" };
// Call `greet.apply(user, ["Hi"])`
// Call `greet.apply(user, ["Hi"])`
greet.apply(user, ["Hi"]);

bind()

bind() creates a new function with a fixed this value.

The new function can be called later. bind() is commonly used to lock in this for a callback that will be invoked later by other code, such as an event handler that needs to reference a specific object instance.

Example: bind()

javascript

// Define the function `greet` with no parameters
// Define the function `greet` with no parameters
function greet() {
  // Print `"Hello, " + this.name` to the console
  // Print `"Hello, " + this.name` to the console
  console.log("Hello, " + this.name);
}
// Declare the constant `user`, set to `{ name: "Sam" }`
// Declare the constant `user`, set to `{ name: "Sam" }`
const user = { name: "Sam" };
// Declare the constant `boundGreet`, set to `greet.bind(user)`
// Declare the constant `boundGreet`, set to `greet.bind(user)`
const boundGreet = greet.bind(user);
// Call `boundGreet()`
// Call `boundGreet()`
boundGreet();

Main Difference

call() and apply() run now. bind() returns a new function for later use. Because apply() accepts an array, it also works well with variable-length argument lists where you don't know in advance how many values you're passing.

Example: Main Difference

javascript

function sum(a, b) { return a + b; }
console.log(sum.call(null, 1, 2));   // runs now
console.log(sum.apply(null, [1, 2])); // runs now, args in array
const later = sum.bind(null, 1, 2);
console.log(later());               // runs later

Practice

Use call when arguments are separate, apply when arguments are in an array, and bind when you want a reusable function.

A typical pattern is const boundFn = obj.method.bind(obj) so boundFn can be passed around freely without losing its connection to obj.

Example: Practice

javascript

// Declare the constant `obj`, set to `{ value: 42 }`
// Declare the constant `obj`, set to `{ value: 42 }`
const obj = { value: 42 };
// Define the function `show` with no parameters
// Define the function `show` with no parameters
function show() { console.log(this.value); }
// Declare the constant `boundFn`, set to `show.bind(obj)`
// Declare the constant `boundFn`, set to `show.bind(obj)`
const boundFn = show.bind(obj);
// Call `boundFn()`
// Call `boundFn()`
boundFn();

Live Example

Chapter Quiz — Complete all 8 topics to unlock

0/8 topics done

Complete these topics first:

← Previous Lesson JS this Keyword Next Lesson → JS IIFEs

JS call apply bind

call()

apply()

bind()

Main Difference

Practice

Chapter Quiz — Complete all 8 topics to unlock

Login to run this code