The bind() Method in JavaScript

🧠 What is bind()?

The bind() method in JavaScript creates a new function with the this keyword permanently set to a specific object. This is especially helpful when you want a function to maintain its context even when passed around (like in event listeners or callbacks). 🔒

Note

💡 Unlike call() and apply(), bind() doesn't invoke the function immediately — it returns a new function with the bound context.

📌 Syntax

bind() Syntax

const boundFunction = originalFunction.bind(thisArg, arg1, arg2, ...);

- thisArg: The object to bind as this
- arg1, arg2, ...: Optional arguments to prepend to the function call
- boundFunction: A new function with the bound this and optionally pre-filled arguments

⚙️ Example

Basic bind() usage

const person = {
  name: "Luna",
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

const greetFn = person.greet;
greetFn(); // ❌ 'this' is undefined or global

const boundGreet = person.greet.bind(person);
boundGreet(); // ✅ Hello, I'm Luna

Note

📛 Without bind(), the context (this) can be lost when assigning methods to variables.

🧩 With Arguments

Binding with pre-filled arguments

function introduce(language) {
  console.log(`${this.name} codes in ${language}`);
}

const developer = { name: "Kai" };
const introduceKai = introduce.bind(developer, "JavaScript");

introduceKai(); // Kai codes in JavaScript

📦 Use Case: setTimeout

bind() with setTimeout

const timer = {
  seconds: 0,
  start() {
    setTimeout(function () {
      console.log(this.seconds); // ❌ undefined
    }, 1000);
  }
};

timer.start();

To preserve context inside setTimeout, we use bind():

Fixed with bind()

const timer = {
  seconds: 5,
  start() {
    setTimeout(function () {
      console.log(this.seconds); // ✅ 5
    }.bind(this), 1000);
  }
};

timer.start();

🔄 Reuse: Bound Functions Are Not Overwritten

Once you bind a function, its this context is locked in — rebinding won’t affect it.

Bound context cannot be changed

function sayHi() {
  console.log(`Hi from ${this.name}`);
}

const person1 = { name: "Mia" };
const person2 = { name: "Zion" };

const sayHiMia = sayHi.bind(person1);
sayHiMia.bind(person2)(); // Still logs "Hi from Mia"

Note

⚠️ A function can only be bound once. Further bindings have no effect.

📚 Summary Table

FeatureDescription
ReturnsA new bound function
When to useWhen passing methods as callbacks and preserving context is critical
Context lockingthis is permanently bound

🔗 Related Methods

>>“The value of this is determined not by how a function is defined, but by how it is called.” 🔍