3. What is the difference between Call, Apply and Bind

In JavaScript, call(), apply(), and bind() are methods used to control the value of this when calling a function. Although they are similar, there are key differences in how they are used.

1. call()

• Definition: Invokes a function immediately, allowing you to pass arguments one by one.
• Syntax: func.call(thisArg, arg1, arg2, ...)
• Use Case: When you know the number of arguments ahead of time.

Example:

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

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

2. apply()

• Definition: Invokes a function immediately, but arguments are passed as an array or array-like object.
• Syntax: func.apply(thisArg, [argsArray])
• Use Case: When arguments are in an array or you don’t know the number of arguments ahead of time.

Example:

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

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

3. bind()

• Definition: Returns a new function with a permanently bound this value and optional preset arguments. Unlike call and apply, it does not invoke the function immediately.
• Syntax: const boundFunc = func.bind(thisArg, arg1, arg2, ...)
• Use Case: When you want to store a function with a specific this value for later use.

Example:

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

const person = { name: "Charlie" };
const boundGreet = greet.bind(person, "Hey");
boundGreet("!!"); 
// Output: Hey, Charlie!!

📝 Summary of Differences

Here are more detailed examples of call(), apply(), and bind() in different scenarios to help you understand their practical uses:

🚀 1. Using call() for Method Borrowing

You can borrow methods from other objects using call().

javascript
CopyEdit
const person = {
  name: "Alice",
  greet() {
    console.log(`Hello, ${this.name}`);
  }
};

const anotherPerson = { name: "Bob" };

// Borrowing greet method from person
person.greet.call(anotherPerson);
// Output: Hello, Bob

🚀 2. Using apply() for Math Operations

apply() is useful when you need to pass an array of arguments, such as with Math functions.

javascript
CopyEdit
const numbers = [5, 3, 10, 1];

const max = Math.max.apply(null, numbers);
console.log(max); // Output: 10

const min = Math.min.apply(null, numbers);
console.log(min); // Output: 1

🚀 3. Using bind() for Function Binding

bind() is helpful when you need a function with a fixed this context to be called later.

javascript
CopyEdit
const person = {
  name: "Charlie",
  greet() {
    console.log(`Hello, ${this.name}`);
  }
};

const greetPerson = person.greet.bind(person);
setTimeout(greetPerson, 1000);
// Output: Hello, Charlie

🚀 4. Using call(), apply(), and bind() in Constructor Functions

You can use them to inherit properties from other constructors.

javascript
CopyEdit
function Person(name, age) {
  this.name = name;
  this.age = age;
}

function Employee(name, age, position) {
  Person.call(this, name, age);
  this.position = position;
}

const emp = new Employee("Dave", 30, "Engineer");
console.log(emp);
// Output: Employee { name: 'Dave', age: 30, position: 'Engineer' }

🚀 5. Using bind() with Partially Applied Functions

You can create a function with preset arguments using bind().

javascript
CopyEdit
function multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2); // Fix 'a' to 2
console.log(double(5)); // Output: 10

const triple = multiply.bind(null, 3); // Fix 'a' to 3
console.log(triple(5)); // Output: 15

🚀 6. Using apply() with Variable Arguments

When you don’t know how many arguments will be passed, use apply().

javascript
CopyEdit
function sum() {
  return Array.prototype.reduce.apply(arguments, [(a, b) => a + b, 0]);
}

console.log(sum(1, 2, 3, 4, 5)); 
// Output: 15

🚀 7. Using bind() with Event Listeners

Ensure the correct this context with bind() in event handlers.

javascript
CopyEdit
class Button {
  constructor(label) {
    this.label = label;
  }

  handleClick() {
    console.log(`Button ${this.label} clicked`);
  }
}

const btn = new Button("Submit");
const buttonElement = document.createElement("button");
buttonElement.innerText = "Submit";
buttonElement.addEventListener("click", btn.handleClick.bind(btn));
document.body.appendChild(buttonElement);

📝 Final Summary of Key Differences