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

If you hang around JavaScript developers long enough, you will eventually hear someone complain about the this keyword. It has a reputation for being confusing, unpredictable, and downright magical.

But here is a secret: this isn't magic at all. It just follows a specific set of rules.

In English, we use pronouns to avoid repeating names. Instead of saying, "Ritesh dropped Ritesh's pen," we say, "Ritesh dropped his pen." In JavaScript, this acts like that pronoun. It refers to the "owner" of the function that is executing.

What does this mean? (The Golden Rule)

The most important rule to remember is this is determined by WHO is calling the function.

It does not matter where you wrote the function. It only matters how the function is invoked (called) at that exact moment.

Think of this as a pronoun. In the sentence "Rahul is eating because he is hungry," the word "he" refers to Rahul. In JavaScript, this refers to the object that is currently executing the code.

• In a normal function: this usually points to the global object (the window).

• In a method: this points to the object the method belongs to.

this Inside Normal Functions

If you write a normal, standalone function and call it directly, who is calling it? Technically, the global environment is.

In a web browser, the global object is the window. So, inside a regular function, this defaults to the window object.

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

sayHello(); // Outputs: the global Window object

E:\Hitesh_Web_Dev_2026\blog_folder\10.JS-The Magic of this, call(), apply(), and bind() in JavaScript>node assign10.js
<ref *1> Object [global] {
  global: [Circular *1],
  clearImmediate: [Function: clearImmediate],
  setImmediate: [Function: setImmediate] {
    Symbol(nodejs.util.promisify.custom): [Getter]
  },
  clearInterval: [Function: clearInterval],
  clearTimeout: [Function: clearTimeout],
  setInterval: [Function: setInterval],
  setTimeout: [Function: setTimeout] {
    Symbol(nodejs.util.promisify.custom): [Getter]
  },
  queueMicrotask: [Function: queueMicrotask],
  structuredClone: [Function: structuredClone],
  atob: [Function: atob],
  btoa: [Function: btoa],
  performance: [Getter/Setter],
  fetch: [Function: fetch],
  crypto: [Getter],
  navigator: [Getter]
}

this Inside Objects

Things make much more sense when we put functions inside objects (we call these methods).

When a method is called, this points to the object standing directly to the left of the dot (.).

const user = {
  name: "Alia",
  greet: function() {
    // 'this' refers to the 'user' object!
    console.log(`Hello, my name is ${this.name}`);
  }
};

user.greet(); // Outputs: "Hello, my name is Alia"

E:\Hitesh_Web_Dev_2026\blog_folder\10.JS-The Magic of this, call(), apply(), and bind() in JavaScript>node assign10.js
Hello, my name is Alia

The Problem: Losing this

What if we have another object that doesn't have a greet method, but we want to use Alia's method?

const user2 = {
  name: "Ranbir"
};
// Ranbir doesn't have a greet method! How can he say hello?

This brings us to Method Borrowing. JavaScript gives us three magical methods—call(), apply(), and bind()—to explicitly tell a function exactly what this should be.

What call() Does

The call() method allows you to call a function belonging to one object but assign it to a completely different object. You are essentially forcing this to be whatever you pass in. In layperson's terms, it helps you replace the value of this inside a function with whatever value you want.

Syntax: functionName.call(thisArg, arg1, arg2, ...)

// We borrow Alia's greet method, but force 'this' to point to Ranbir!
user.greet.call(user2); 
// Outputs: "Hello, my name is Ranbir"

E:\Hitesh_Web_Dev_2026\blog_folder\10.JS-The Magic of this, call(), apply(), and bind() in JavaScript>node assign10.js
Hello, my name is Alia
Hello, my name is Ranbir

What apply() Does

The apply() method does the exact same thing as call(). It invokes the function immediately and sets the this context.

The only difference is how they handle extra arguments.

• call() takes arguments separated by Commas.

• apply() takes arguments as an Array.

function introduce(greeting, punctuation) {
  console.log(`\({greeting}, my name is \){this.name}${punctuation}`);
}
// Using call (Comma separated)
introduce.call(user2, "Hey", "!"); // Outputs: "Hey, my name is Ranbir!"

// Using apply (Array)
introduce.apply(user2, ["Greetings", "."]); // Outputs: "Greetings, my name is Ranbir."

E:\Hitesh_Web_Dev_2026\blog_folder\10.JS-The Magic of this, call(), apply(), and bind() in JavaScript>node assign10.js
Hello, my name is Alia
Hello, my name is Ranbir
Hey, my name is Ranbir!
Greetings, my name is Ranbir.

What bind() Does

Sometimes, you do not want to run the function immediately. You just want to "prep" it for later.

The bind() method doesn't execute the function. Instead, it returns a brand new function where this is permanently locked to the object you provided.

// We create a new function permanently bound to Ranbir
const ranbirGreets = user.greet.bind(user2);
// We can run it whenever we want!
ranbirGreets(); // Outputs: "Hello, my name is Ranbir"

E:\Hitesh_Web_Dev_2026\blog_folder\10.JS-The Magic of this, call(), apply(), and bind() in JavaScript>node assign10.js
Hello, my name is Alia
Hello, my name is Ranbir
Hey, my name is Ranbir!
Greetings, my name is Ranbir.
Hello, my name is Ranbir

Difference between call, apply, and bind

Feature	call()	apply()	bind()
Execution	Immediate	Immediate	Returns a new function
Arguments	Comma-separated	Array format	Comma-separated
Main Use	Method borrowing	Handling arrays	Event listeners / Callbacks

Assignment Idea

1. Create an object with a method using this

// 1. Create the Object
const instructor = {
    course: "JavaScript Mastery",
    describe: function(student, rating) {
        console.log(`\({student} rated "\){this.course}": ${rating} stars`);
    }
};

const studentA = { course: "React Basics" };

1. Borrow that method using call()

// 2. Use call() - Arguments passed individually
// Immediately executes: "Rahul rated "React Basics": 5 stars"
instructor.describe.call(studentA, "Rahul", 5);

E:\Hitesh_Web_Dev_2026\blog_folder\10.JS-The Magic of this, call(), apply(), and bind() in JavaScript>node 10-assign.js
Rahul rated "React Basics": 5 stars

1. Use apply() with array arguments

// 3. Use apply() - Arguments passed as an array
// Immediately executes: "Sanya rated "React Basics": 4 stars"
instructor.describe.apply(studentA, ["Sanya", 4]);

E:\Hitesh_Web_Dev_2026\blog_folder\10.JS-The Magic of this, call(), apply(), and bind() in JavaScript>node 10-assign.js
Rahul rated "React Basics": 5 stars
Sanya rated "React Basics": 4 stars

1. Use bind() and store the function

// 4. Use bind() - Creates a new function with 'this' locked to studentA
// We "pre-fill" the student name but leave the rating for later
const checkRating = instructor.describe.bind(studentA, "Peer Evaluator");

// Execution happens here
checkRating(5); // Logs: "Peer Evaluator rated "React Basics": 5 stars"

E:\Hitesh_Web_Dev_2026\blog_folder\10.JS-The Magic of this, call(), apply(), and bind() in JavaScript>node 10-assign.js
Rahul rated "React Basics": 5 stars
Sanya rated "React Basics": 4 stars
Peer Evaluator rated "React Basics": 5 stars

Conclusion

The this keyword does not have to be a nightmare. Just remember to ask yourself: "Who is calling the function right now?" Once you understand that this is just a dynamic reference, tools like call(), apply(), and bind() become incredibly powerful.

What I Learned as a Student

• this means “who is calling the function”.

• Inside objects, this refers to the object.

• call() sets this and executes immediately.

• apply() sets this and takes arguments as array.

• bind() sets this and returns a new function.

Understanding this concept prevents many real-world bugs and makes advanced topics like event handlers and callbacks easier.

Many experienced JavaScript developers in modern web development use this rule:

If you see this behaving strangely, check who is calling the function.

Not the function.

The caller.

This single habit solves 80% of these bugs.