JavaScript "this" Explained: Key Concepts Every Interviewer Tests

1. What is this in JavaScript?

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

It allows functions (methods) to access properties of the object they belong to.

Example

const user = {
  name: "Pritam",
  greet() {
    console.log(this.name);
  }
};

user.greet(); // "Pritam"

Here, this → user

---

2. this Depends on HOW Function is Called (Runtime Binding)

(a) Global Context

console.log(this);

• In browser → window

• In Node.js → {} (module object)

---

(b) Regular Function

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

show();

• Non-strict mode → global object

• Strict mode → undefined

---

(c) Method Context (Most Important)

const obj = {
  name: "Batman",
  show() {
    console.log(this.name);
  }
};

obj.show(); // "Batman"

Rule: 👉 If called with dot (obj.method()), this = obj

---

(d) Constructor Function

function Person(name) {
  this.name = name;
}

const p1 = new Person("Tony");
console.log(p1.name); // "Tony"

Rule: 👉 With new, this = newly created object

---

(e) Event Handler

button.addEventListener("click", function () {
  console.log(this); // button element
});

Rule: 👉 this = element that triggered the event

---

3. Arrow Functions and this

Arrow functions DO NOT have their own this They inherit (lexical this) from parent scope

Example

const obj = {
  name: "Pritam",
  normalFunc() {
    console.log(this.name);
  },
  arrowFunc: () => {
    console.log(this.name);
  }
};

obj.normalFunc(); // "Pritam"
obj.arrowFunc();  // undefined

Why?

• arrowFunc takes this from outer scope (global), not obj

---

Correct Use of Arrow (Fixing Context Loss)

const person = {
  name: "Bruce",
  getName() {
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }
};

person.getName(); // "Bruce"

---

4. Implicit vs Explicit Binding

(a) Implicit Binding

const user = {
  name: "Pritam",
  sayHi() {
    console.log(this.name);
  }
};

user.sayHi(); // "Pritam"

👉 this automatically refers to user

---

(b) Explicit Binding

You manually control this

---

5. .call(), .apply(), .bind()

(a) .call()

function greet(city) {
  console.log(this.name, city);
}

const user = { name: "Pritam" };

greet.call(user, "Kolkata"); 
// Pritam Kolkata

👉 Calls immediately

---

(b) .apply()

greet.apply(user, ["Delhi"]);

👉 Same as call, but arguments in array

---

(c) .bind()

const newFunc = greet.bind(user);
newFunc("Mumbai"); 
// Pritam Mumbai

👉 Returns a new function (does NOT call immediately)

---

6. Common Pitfall (VERY IMPORTANT)

Problem: Context Loss

const person = {
  name: "Bruce Wayne",
  getName() {
    console.log(this.name);
  }
};

setTimeout(person.getName, 1000);

❌ Output: undefined

Why?

• Function is passed separately → loses object context

• Now it's a normal function → this = global / undefined

---

Fix 1: .bind()

setTimeout(person.getName.bind(person), 1000);

---

Fix 2: Arrow Function

setTimeout(() => person.getName(), 1000);

---

7. Summary (Interview Cheat Sheet)

Scenario	this value
Global	window / global
Function	global / undefined (strict)
Method	object before dot
Constructor	new object
Arrow function	inherited from parent
Event handler	element

---

8. Key Rule to Remember

👉 this is NOT about where function is written 👉 It is about how function is called