📘 JavaScript bind()

✅ 1. What Is bind()?

The bind() method creates a new function with:

• A fixed this value (context)
• Optional preset arguments

jsCopyEditconst person = {
  name: "Alice"
};

function greet() {
  console.log("Hello, " + this.name);
}

const boundGreet = greet.bind(person);
boundGreet(); // Hello, Alice

bind() does not call the function immediately — it returns a new function.

---

📌 2. Syntax

jsCopyEditfunction.bind(thisArg, arg1, arg2, ...)

• thisArg: the value to bind as this
• arg1, arg2, ...: (optional) arguments to prepend

---

📌 3. Practical Example

jsCopyEditconst user = {
  name: "Bob"
};

function sayHi(greeting) {
  console.log(`${greeting}, I’m ${this.name}`);
}

const sayHiToBob = sayHi.bind(user);
sayHiToBob("Hello"); // Hello, I’m Bob

---

📌 4. Pre-setting Arguments

jsCopyEditfunction multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2);

console.log(double(5)); // 10

🎯 Useful for currying or partial application

---

📌 5. bind() vs call() vs apply()

Method	Invokes Immediately?	Accepts Args as Array?	Returns New Function?
call	✅	❌	❌
apply	✅	✅	❌
bind	❌	❌	✅

---

📌 6. Common Use Case: Event Handlers

jsCopyEditfunction Button(label) {
  this.label = label;
}

Button.prototype.click = function() {
  console.log(this.label + " clicked");
};

const button = new Button("Save");
const clickHandler = button.click.bind(button);

document.getElementById("myBtn").addEventListener("click", clickHandler);

Without bind, this would be undefined or the DOM element inside the event handler.

---

📌 7. Losing this Without bind()

jsCopyEditconst obj = {
  name: "Eva",
  speak() {
    console.log(this.name);
  }
};

const talk = obj.speak;
talk(); // ❌ undefined (or error in strict mode)

const fixedTalk = obj.speak.bind(obj);
fixedTalk(); // ✅ Eva

---

🧪 Practice Challenges

1. Create a function describe() that logs "I am <name>" and bind it to a person object.
2. Make a partially applied function add5 = add.bind(null, 5) and call add5(3).

---

🧠 Summary

Feature	Description
bind()	Returns new function with fixed this
Doesn’t call	Just prepares the function
Pre-set args	Supports partial application
Use cases	Callbacks, event handlers, currying

---

✅ Bonus Tip: Arrow Functions Don’t Need bind()

Arrow functions inherit this from the enclosing scope.

jsCopyEditconst obj = {
  name: "Arrow",
  say: () => console.log(this.name)
};

obj.say(); // `this` is not `obj`, it's outer scope

---

Would you like:

✅ 1. What Is bind()?

The bind() method creates a new function with:

• A fixed this value (context)
• Optional preset arguments

jsCopyEditconst person = {
  name: "Alice"
};

function greet() {
  console.log("Hello, " + this.name);
}

const boundGreet = greet.bind(person);
boundGreet(); // Hello, Alice

bind() does not call the function immediately — it returns a new function.

---

📌 2. Syntax

jsCopyEditfunction.bind(thisArg, arg1, arg2, ...)

• thisArg: the value to bind as this
• arg1, arg2, ...: (optional) arguments to prepend

---

📌 3. Practical Example

jsCopyEditconst user = {
  name: "Bob"
};

function sayHi(greeting) {
  console.log(`${greeting}, I’m ${this.name}`);
}

const sayHiToBob = sayHi.bind(user);
sayHiToBob("Hello"); // Hello, I’m Bob

---

📌 4. Pre-setting Arguments

jsCopyEditfunction multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2);

console.log(double(5)); // 10

🎯 Useful for currying or partial application

---

📌 5. bind() vs call() vs apply()

Method	Invokes Immediately?	Accepts Args as Array?	Returns New Function?
call	✅	❌	❌
apply	✅	✅	❌
bind	❌	❌	✅

---

📌 6. Common Use Case: Event Handlers

jsCopyEditfunction Button(label) {
  this.label = label;
}

Button.prototype.click = function() {
  console.log(this.label + " clicked");
};

const button = new Button("Save");
const clickHandler = button.click.bind(button);

document.getElementById("myBtn").addEventListener("click", clickHandler);

Without bind, this would be undefined or the DOM element inside the event handler.

---

📌 7. Losing this Without bind()

jsCopyEditconst obj = {
  name: "Eva",
  speak() {
    console.log(this.name);
  }
};

const talk = obj.speak;
talk(); // ❌ undefined (or error in strict mode)

const fixedTalk = obj.speak.bind(obj);
fixedTalk(); // ✅ Eva

---

🧪 Practice Challenges

1. Create a function describe() that logs "I am <name>" and bind it to a person object.
2. Make a partially applied function add5 = add.bind(null, 5) and call add5(3).

---

🧠 Summary

Feature	Description
bind()	Returns new function with fixed this
Doesn’t call	Just prepares the function
Pre-set args	Supports partial application
Use cases	Callbacks, event handlers, currying

---

✅ Bonus Tip: Arrow Functions Don’t Need bind()

Arrow functions inherit this from the enclosing scope.

jsCopyEditconst obj = {
  name: "Arrow",
  say: () => console.log(this.name)
};

obj.say(); // `this` is not `obj`, it's outer scope

---

Would you like:

✅ 1. What Is bind()?

The bind() method creates a new function with:

• A fixed this value (context)
• Optional preset arguments

jsCopyEditconst person = {
  name: "Alice"
};

function greet() {
  console.log("Hello, " + this.name);
}

const boundGreet = greet.bind(person);
boundGreet(); // Hello, Alice

bind() does not call the function immediately — it returns a new function.

---

📌 2. Syntax

jsCopyEditfunction.bind(thisArg, arg1, arg2, ...)

• thisArg: the value to bind as this
• arg1, arg2, ...: (optional) arguments to prepend

---

📌 3. Practical Example

jsCopyEditconst user = {
  name: "Bob"
};

function sayHi(greeting) {
  console.log(`${greeting}, I’m ${this.name}`);
}

const sayHiToBob = sayHi.bind(user);
sayHiToBob("Hello"); // Hello, I’m Bob

---

📌 4. Pre-setting Arguments

jsCopyEditfunction multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2);

console.log(double(5)); // 10

🎯 Useful for currying or partial application

---

📌 5. bind() vs call() vs apply()

Method	Invokes Immediately?	Accepts Args as Array?	Returns New Function?
call	✅	❌	❌
apply	✅	✅	❌
bind	❌	❌	✅

---

📌 6. Common Use Case: Event Handlers

jsCopyEditfunction Button(label) {
  this.label = label;
}

Button.prototype.click = function() {
  console.log(this.label + " clicked");
};

const button = new Button("Save");
const clickHandler = button.click.bind(button);

document.getElementById("myBtn").addEventListener("click", clickHandler);

Without bind, this would be undefined or the DOM element inside the event handler.

---

📌 7. Losing this Without bind()

jsCopyEditconst obj = {
  name: "Eva",
  speak() {
    console.log(this.name);
  }
};

const talk = obj.speak;
talk(); // ❌ undefined (or error in strict mode)

const fixedTalk = obj.speak.bind(obj);
fixedTalk(); // ✅ Eva

---

🧪 Practice Challenges

1. Create a function describe() that logs "I am <name>" and bind it to a person object.
2. Make a partially applied function add5 = add.bind(null, 5) and call add5(3).

---

🧠 Summary

Feature	Description
bind()	Returns new function with fixed this
Doesn’t call	Just prepares the function
Pre-set args	Supports partial application
Use cases	Callbacks, event handlers, currying

---

✅ Bonus Tip: Arrow Functions Don’t Need bind()

Arrow functions inherit this from the enclosing scope.

jsCopyEditconst obj = {
  name: "Arrow",
  say: () => console.log(this.name)
};

obj.say(); // `this` is not `obj`, it's outer scope

---

Would you like:

• 📄 A PDF version of this tutorial?
• 💻 A JSFiddle/CodePen to test this live?
• 🧠 A quiz on bind, call, and apply?