javaScript bind() Method

🔧 What is bind() and Why Is It Used?

The bind() method in JavaScript is used to create a new function with a permanently bound this value. It’s especially useful when a method loses its original context — like when passed as a callback or event handler.

🎯 Real-Time Example with Explanation

const person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

const member = {
  firstName: "New",
  lastName: "Person",
};

let fullName = person.fullName.bind(member);
console.log(fullName());

Explanation:

• person.fullName is a method that returns the full name using its own this.
• To use this method for another object (member), we bind it.
• Now this points to member instead of person.
• The result is "New Person".

❗ Multi-bind Example: What Happens?

function name() {
  console.log(this.name);
}

name = name.bind({ name: "" }).bind({ name: "Doe" }).bind({ name: "Third" });

name();

Expected output:

Third

Actual output:

(empty string)

🧠 Explanation

The first bind() fixes the context of this to { name: "" }. All later bind() calls are ignored.

Once a function is bound, you cannot rebind it.
Only the first call to bind() matters.

✅ Key Takeaways

• bind() returns a new function with a locked this.
• You can’t change the context after the first bind().
• If you want a different binding, start with the unbound original function.
• Use .call() or .apply() if you want to set context dynamically at call time.

🧪 Final Output Recap

name = name.bind({ name: "" }).bind({ name: "Doe" }).bind({ name: "Third" });

name();  // Output: (empty string)

💡 Pro Tip

Never bind a function more than once. Save the original if you plan to reuse or change the context. Also remember, bind() has no effect on arrow functions since they don’t have their own this.