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

In JavaScript, one of the most confusing topics for beginners is this keyword and function methods like call, apply, and bind.

But the idea is actually simple.

Think of it like this:

this means “who is calling the function”

---

What does this mean in JavaScript?

this refers to the object that is currently executing the function.

this tells us the owner of the function.

Its value is not fixed and depends entirely on how the function is called. For example, when used inside an object method, this usually refers to that object, allowing you to access its properties. In a global or standalone function, this may refer to the global object (like window in browsers) or be undefined in strict mode.

Arrow functions behave differently because they do not have their own this. Instead, they take this from the surrounding scope or we can say that its parent scope, where they were created. This makes them useful in some cases

---

this inside Normal Functions

In a normal function, this depends on how the function is called.

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

show();

In strict mode: this is undefined

In browser: this can be window

---

this inside Objects

When a function is inside an object known as method, this refers to that object.

const user = {
  name: "Piyush",
  show: function() {
    console.log(this.name);
  }
};

user.show();

Output: Piyush

Here: this = user object

Simple Rule for this

“Who is calling this function?”

That object becomes this.

---

What is call()?

call() is used to borrow a function and set this manually.

Example:

const user1 = {
  name: "Piyush"
};

function greet() {
  console.log("Hello " + this.name);
}

greet.call(user1);

Output: Hello Piyush

---

What is apply()?

apply() is similar to call(), but arguments are passed as an array.

Example:

const user1 = {
  name: "Piyush"
};

function greet(city, age) {
  console.log(this.name + " lives in " + city + " and his age is " + age);
}

greet.apply(user1, ["Kolkata", 22]);

Output: Piyush lives in Kolkata and his age is 22

---

What is bind()?

bind() also sets this, but it does NOT call the function immediately.

Instead, it returns a new function.

Example:

const user1 = {
  name: "Hitesh"
};

function greet() {
  console.log("Hello " + this.name);
}

const newFunc = greet.bind(user1);

newFunc();

Output: Hello Hitesh

---

call vs apply vs bind

Feature	call()	apply()	bind()
Executes?	Yes immediately	Yes immediately	No (returns function)
Arguments	Passed one by one	Passed as array	Passed later
Use case	Direct function call	Array-based call	Save function for later

Simple Analogy

Imagine a function is a mobile app:

• call() → Open app and use it immediately

• apply() → Open app and send data in a bundle

• bind() → Install app for later use

Why these are important

• Helps to reuse functions

• Controls this value

• Useful in event handling

• Important in frameworks like React

---

Conclusion

The this keyword and methods like call, apply, and bind help to control, how functions are executed in JavaScript.

• this = who is calling

• call = run immediately

• apply = run with array arguments

• bind = save for later

Mastering this, call, apply, and bind helps you to understand JavaScript functions deeply and write more flexible and reusable code.