this keyword in JavaScript

this Keyword in JavaScript – Complete Beginner to Advanced Guide

The this keyword in JavaScript is one of the most confusing concepts for beginners. Its value changes depending on how a function is called, not where it is written.

This tutorial explains this keyword in JavaScript with simple language, multiple examples, diagrams, real-world analogies, interview points, and best practices.

---

🔹 What is this in JavaScript?

this refers to the current object that is executing the code.

Simple meaning: this = “who is calling me?”

---

🧠 Golden Rule

The value of this depends on how the function is called.

---

📌 this in Global Scope

console.log(this);

Browser: window
Node.js: {} (empty object)

---

📌 this inside a Function

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

Browser: window
Strict mode: undefined

---

📌 this inside an Object Method

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

user.greet(); // Rahul 

this refers to the object calling the method.

---

📌 this in Arrow Function

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

user.greet(); // undefined 

Arrow functions do NOT have their own this.
They take this from parent scope.

---

📌 this in Constructor Function

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

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

this refers to the new object being created.

---

📌 this in Class

class Student {
    constructor(name) {
        this.name = name;
    }

```
greet() {
    console.log(this.name);
}
```

}

const s1 = new Student("Neha");
s1.greet(); // Neha 

---

🔁 call(), apply(), bind()

const person1 = { name: "A" };
const person2 = { name: "B" };

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

greet.call(person1); // A
greet.apply(person2); // B

const newGreet = greet.bind(person1);
newGreet(); // A

---

⚖ this Behavior Table

Context	Value of this
Global (browser)	window
Function	window / undefined (strict)
Object Method	Object itself
Arrow Function	Parent scope this
Constructor/Class	New object
call/apply/bind	Explicit object

---

🧠 Real-World Analogy

Think of this as a microphone 🎤

• Whoever holds the mic = this
• Speaker changes → this changes

---

🚫 Common Mistakes

• Using arrow functions as object methods
• Assuming this refers to function name
• Not understanding call/apply/bind
• Confusing lexical vs dynamic this

---

📌 Best Practices

• Use normal functions for object methods
• Use arrow functions for callbacks
• Use bind() for event handlers
• Avoid var + this confusion
• Always understand call context

---

❓ Interview Questions

• What is this keyword?
• How does this work in arrow functions?
• Difference between this in function and method?
• Explain call, apply, bind
• What is lexical this?

---

✅ Conclusion

The this keyword is dynamic and context-based in JavaScript. Understanding how this works is essential for writing clean, bug-free, and scalable JavaScript code.

Mastering this means mastering JavaScript fundamentals.

---

🚀 Happy Learning JavaScript!

Follow this blog for JavaScript, Python, Automation, and Full-Stack tutorials.