Call, Apply and Bind

The call(), apply(), and bind() methods in JavaScript are all used to control the this context within functions. They allow you to explicitly set the value of this when calling or preparing to call a function. However, they differ in syntax and behavior.

1. call()

• Calls a function immediately, with a specified this value and arguments passed one by one.

Syntax:

func.call(thisArg, arg1, arg2, ...)

Example:

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

const person = { name: "Alice" };
greet.call(person, "Hello", "!"); // Hello, Alice!

2. apply()

• Calls a function immediately, with a specified this value and arguments passed as an array or array-like object.

Syntax:

func.apply(thisArg, [arg1, arg2, ...])

Example:

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

const person = { name: "Alice" };
greet.apply(person, ["Hi", "?"]); // Hi, Alice?

3. bind()

• Does not call the function immediately.

• Returns a new function with a bound this value and optional preset arguments.

• Useful for delayed execution, like in event handlers or callbacks.

Syntax:

const boundFunc = func.bind(thisArg, arg1, arg2, ...)

Example:

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

const person = { name: "Alice" };
const greetAlice = greet.bind(person, "Hey");
greetAlice("!"); // Hey, Alice!

Summary Table

---