Bind vs Call vs Apply in JavaScript: Key Differences and Usage

In JavaScript, bind creates a new function with a fixed this value and optional preset arguments, while call and apply immediately invoke a function with a specified this context. The difference between call and apply is how they accept arguments: call takes arguments individually, and apply takes them as an array.

Quick Comparison

Here is a quick table summarizing the key differences between bind, call, and apply in JavaScript.

Feature	bind	call	apply
Purpose	Creates a new function with bound this and optional preset arguments	Calls function immediately with specified this and arguments	Calls function immediately with specified this and arguments as array
Invocation	Returns a new function	Invokes function immediately	Invokes function immediately
Arguments	Passed individually or preset during binding	Passed individually after this	Passed as an array after this
Use case	When you want to reuse a function with fixed this	When you want to call a function with a specific this and arguments	When you want to call a function with a specific this and arguments in array form
Return value	New bound function	Return value of the called function	Return value of the called function

Key Differences

bind does not call the function immediately. Instead, it returns a new function with the this keyword permanently set to the provided value. You can also preset some arguments that will be prepended when the new function is called later.

call and apply both invoke the function immediately with a specified this context. The main difference is how they accept arguments: call takes arguments one by one, while apply takes arguments as an array or array-like object.

Use bind when you want to create a reusable function with a fixed this. Use call or apply when you want to invoke a function right away with a specific this and arguments.

Code Comparison

Using bind to create a new function with fixed this and preset argument:

javascript

const person = {
  name: 'Alice'
};

function greet(greeting) {
  return `${greeting}, my name is ${this.name}`;
}

const greetAlice = greet.bind(person, 'Hello');
console.log(greetAlice());

Output

Hello, my name is Alice

Call and Apply Equivalent

Using call and apply to invoke the same function immediately with this and arguments:

javascript

const person = {
  name: 'Alice'
};

function greet(greeting) {
  return `${greeting}, my name is ${this.name}`;
}

console.log(greet.call(person, 'Hello'));
console.log(greet.apply(person, ['Hello']));

Output

Hello, my name is Alice
Hello, my name is Alice

When to Use Which

Choose bind when you want to create a new function with a fixed this and optional preset arguments to use later, such as event handlers or callbacks.

Choose call when you want to invoke a function immediately with a specific this and individual arguments.

Choose apply when you want to invoke a function immediately with a specific this and arguments provided as an array, which is useful when the number of arguments is dynamic or already in an array.

Key Takeaways

bind returns a new function with fixed this and optional preset arguments without calling it immediately.

call invokes a function immediately with this and arguments passed individually.

apply invokes a function immediately with this and arguments passed as an array.

Use bind for reusable functions, and call/apply for immediate invocation with context.

apply is handy when arguments are already in an array or when argument count varies.