🌟 The Magic of this, call(), apply(), and bind() in JavaScript

---

Hey everyone — Dinesh here, your full-stack learner , still fighting with JavaScript quirks late at night.

One of the most confusing topics when I was learning JavaScript was the this keyword. Sometimes it pointed to the object I expected, sometimes to window, and sometimes it was undefined. Then I learned call(), apply(), and bind() — and suddenly everything started making sense.

These four concepts (this, call, apply, bind) are extremely powerful. Once you understand them properly, you’ll feel much more confident working with objects, event handlers, and borrowing methods.

In this blog, I’ll explain everything in the simplest way possible with real examples and clear visuals.

Let’s remove the confusion around this forever.

Chapter 1: What Does this Mean in JavaScript?

this is a special keyword that refers to the object that is currently executing the code.

Simple rule to remember:

this = “Who is calling the function?”

The value of this depends on how the function is called, not where it is written.

Chapter 2: this in Different Situations

1. this Inside a Normal Function

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

showThis();        // In browsers → Window (global object)

When a function is called without any object, this refers to the global object (window in browsers).

2. this Inside an Object Method

const user = {
  name: "Dinesh",
  age: 22,
  
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

user.greet();   // Hello, my name is Dinesh

Here this refers to the user object because user is calling the method.

Advanced Diagram 1: Function → Caller Relationship

Chapter 3: The Power of call()

call() allows you to call a function with a specific this value and individual arguments.

const user1 = { name: "Dinesh", age: 22 };
const user2 = { name: "Rahul", age: 25 };

function introduce(city, country) {
  console.log(`Hi, I'm \({this.name}, from \){city}, ${country}`);
}

// Using call()
introduce.call(user1, "Jodhpur", "India");
// Output: Hi, I'm Dinesh, from Jodhpur, India

introduce.call(user2, "Mumbai", "India");

call() is useful when you want to borrow a method from one object and use it on another.

Chapter 4: The Power of apply()

apply() is almost same as call(), but it takes arguments as an array.

const args = ["Jodhpur", "India"];

introduce.apply(user1, args);
// Same output as call()

When to use apply()?
When you already have arguments in an array.

Chapter 5: The Power of bind()

bind() does not call the function immediately. Instead, it returns a new function with this permanently bound.

const user = { name: "Dinesh" };

function greet(greeting) {
  console.log(`\({greeting}, I'm \){this.name}`);
}

const boundGreet = greet.bind(user);

boundGreet("Hello");        // Hello, I'm Dinesh
boundGreet("Namaste");     // Namaste, I'm Dinesh

bind() is very useful in React (for event handlers) and when you want to fix this value permanently.

Chapter 6: call() vs apply() vs bind()

Diagram 2: Comparison – call vs apply vs bind

Feature	call()	apply()	bind()
Execution	Immediately	Immediately	Returns new function
Arguments	Individual	As Array	Individual (later)
Returns	Result of function	Result of function	New bound function
Use Case	Borrow method	Borrow with array args	Permanent binding (events)
Changes this	Yes	Yes	Yes (permanently)

Chapter 7: Practical Assignment for You

Try this small exercise:

1. Create an object with a method that uses this.

2. Borrow that method using call() on another object.

3. Use apply() with arguments in array format.

4. Use bind() and store the bound function.

Example Solution:

const person1 = { name: "Dinesh" };
const person2 = { name: "Rahul" };

function introduce(city) {
  console.log(`Hi, I'm \({this.name} from \){city}`);
}

// 1. Using call
introduce.call(person1, "Jodhpur");

// 2. Using apply
introduce.apply(person2, ["Mumbai"]);

// 3. Using bind
const rahulIntro = introduce.bind(person2);
rahulIntro("Delhi");

this, call(), apply(), and bind() are not just advanced concepts — they are essential tools for every JavaScript developer. Once you master them, you’ll have much better control over how your code behaves.