✅ 1. What Is bind()?
The bind() method creates a new function with:
- A fixed
thisvalue (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 asthisarg1, 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,thiswould beundefinedor 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
- Create a function
describe()that logs"I am <name>"and bind it to a person object. - Make a partially applied function
add5 = add.bind(null, 5)and calladd5(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
thisvalue (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 asthisarg1, 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,thiswould beundefinedor 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
- Create a function
describe()that logs"I am <name>"and bind it to a person object. - Make a partially applied function
add5 = add.bind(null, 5)and calladd5(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
thisvalue (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 asthisarg1, 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,thiswould beundefinedor 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
- Create a function
describe()that logs"I am <name>"and bind it to a person object. - Make a partially applied function
add5 = add.bind(null, 5)and calladd5(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, andapply?