What is the difference between call, apply, and bind?

In JavaScript, `call()`, `apply()`, and `bind()` are three essential methods available on all functions that allow you to explicitly set the `this` context for a function's execution and pass arguments. While they all serve to manipulate the `this` keyword, they differ in how they execute the function and accept arguments.

Understanding 'this' Context

Before diving into call, apply, and bind, it's crucial to understand that the value of this inside a function depends on how the function is called. These methods provide explicit control over what this refers to, overriding the default binding rules.

The `call()` Method

The call() method immediately invokes a function with a specified this value and arguments provided individually. It's useful when you want to execute a function right away with a particular context and know all the arguments beforehand.

• Invokes the function immediately.
• The first argument is the this context.
• Subsequent arguments are passed to the function individually.

const person = {
  name: 'Alice'
};

function greet(greeting, punctuation) {
  console.log(`${greeting}, ${this.name}${punctuation}`);
}

greet.call(person, 'Hello', '!'); // Output: Hello, Alice!

The `apply()` Method

Similar to call(), the apply() method also immediately invokes a function with a specified this value. The key difference is that apply() accepts arguments as an array (or an array-like object). This is particularly useful when the number of arguments is dynamic or already stored in an array.

• Invokes the function immediately.
• The first argument is the this context.
• The second argument is an array (or array-like object) of arguments to be passed to the function.

const person = {
  name: 'Bob'
};

function greet(greeting, punctuation) {
  console.log(`${greeting}, ${this.name}${punctuation}`);
}

const args = ['Hi', '?'];
greet.apply(person, args); // Output: Hi, Bob?

The `bind()` Method

Unlike call() and apply(), the bind() method does not immediately invoke the function. Instead, it returns a *new function* (a 'bound function') with a permanently set this context and, optionally, pre-set arguments. This new function can then be called later, and its this value will always remain the one established by bind(). It's commonly used in event handlers or callbacks where you need to preserve the this context.

• Does NOT invoke the function immediately; returns a new function.
• The first argument is the this context.
• Subsequent arguments are passed to the new function individually (these are 'partial' arguments that precede any arguments passed when the bound function is finally called).

const person = {
  name: 'Charlie'
};

function greet(greeting, punctuation) {
  console.log(`${greeting}, ${this.name}${punctuation}`);
}

const boundGreet = greet.bind(person, 'Hello');
boundGreet('!'); // Output: Hello, Charlie!

Key Differences Summarized