Mastering the this Keyword in JavaScript: Beginner to Pro

When learning JavaScript, one of the trickiest concepts to master is the this keyword. It behaves differently based on how a function is called, and misunderstanding it can lead to bugs that are hard to trace.

In this guide, we'll walk step-by-step from beginner to advanced concepts with practical examples and real-world use cases—including how this applies in React.

---

💡 What is this?

In JavaScript, this refers to the object that is executing the current function. Its value is determined at runtime based on how the function is invoked, not where it's defined.

---

🔹 Step 1: this in the Global Context

jsCopyEditconsole.log(this); // In browsers, this refers to the window object

In the global scope (outside any function), this refers to the global object (window in browsers).

---

🔹 Step 2: this Inside Regular Functions

jsCopyEditfunction sayHello() {
  console.log(this); // In non-strict mode: window, in strict mode: undefined
}
sayHello();

In a function, this still refers to the global object unless you're in strict mode ('use strict'), in which case it's undefined.

---

🔹 Step 3: this in Object Methods

jsCopyEditconst user = {
  name: 'Alice',
  greet() {
    console.log(`Hi, I'm ${this.name}`);
  },
};
user.greet(); // Hi, I'm Alice

Here, this refers to the user object, because the method is being called on it.

---

🔹 Step 4: Losing this

jsCopyEditconst greet = user.greet;
greet(); // undefined or error

Even though greet was defined in user, when we assign it to a new variable and call it, this is now the global object or undefined.

---

🔹 Step 5: Fixing this with bind, call, and apply

jsCopyEditfunction greet() {
  console.log(this.name);
}
const person = { name: 'Charlie' };
greet.call(person);  // Charlie
greet.apply(person); // Charlie
const bound = greet.bind(person);
bound();             // Charlie

• call() and apply() invoke the function immediately.

• bind() returns a new function with this bound.

---

🔹 Step 6: Arrow Functions and this

Arrow functions do not have their own this. They inherit it from their lexical context.

jsCopyEditconst team = {
  name: 'Developers',
  members: ['A', 'B'],
  showMembers() {
    this.members.forEach(member => {
      console.log(`${member} is in ${this.name}`);
    });
  },
};
team.showMembers();
// A is in Developers
// B is in Developers

If we had used a regular function inside forEach, this would be undefined.

---

🔹 Step 7: this in React

In React class components:

jsCopyEditclass App extends React.Component {
  constructor() {
    super();
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}

Without bind, this.handleClick will lose context when passed as a callback.

In function components, you typically don’t deal with this, thanks to hooks and arrow functions.

---

🧠 Common Interview Questions

1. What is this in JavaScript?

2. How does this behave in arrow functions vs regular functions?

3. How do bind, call, and apply work?

4. Why do we use this in class-based React components?

5. How do closures interact with this?

---

📌 Key Takeaways

• this depends on how a function is invoked.

• Arrow functions inherit this from their context.

• Use .bind() to permanently bind this.

• In React, use arrow functions or class binding to preserve this.

---

✍️ Written by Krishan — follow me on Twitter and GitHub and Linkedin

💡 Check out the current code examples and notes repo: GitHub

📝 Read more on my blog: Hashnode