Arrow functions make this simpler — but only if you know the rules. Here are the 3 traps developers fall into (and how to escape them).

---

Introduction: The “Why is this Undefined?” Bug

We’ve all been there: you write a function, expect this to point to your object, but instead… it’s undefined or window.

Arrow functions were supposed to fix this madness, right?
 Well, yes and no.

The truth: arrow functions handle this differently from traditional functions — sometimes that’s exactly what you need, other times it breaks everything.

Let’s look at the 3 most common mistakes developers make with this in arrow functions, with real-world examples and fixes.

---

1. Using Arrow Functions as Object Methods

The Mistake

const user = {
  name: "Ali",
  greet: () => `Hi, I’m ${this.name}`
};

console.log(user.greet()); 
// ❌ "Hi, I'm undefined"

Why It Happens

Arrow functions don’t have their own this. They inherit this from the outer scope, which here is the global object, not user.

The Fix

Use a regular function for object methods:

const user = {
  name: "Ali",
  greet() {
    return `Hi, I’m ${this.name}`;
  }
};

console.log(user.greet());
// ✅ "Hi, I'm Ali"

💡 Rule: Don’t use arrows for object methods that need this.

---

2. Using Arrow Functions as Constructors

The Mistake

const Person = (name) => {
  this.name = name;
};

const p = new Person("Sara");
// ❌ TypeError: Person is not a constructor

Why It Happens

Arrow functions cannot be used as constructors. They don’t have their own this or prototype.

The Fix

Use a regular function or class:

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

const p = new Person("Sara");
console.log(p.name);
// ✅ "Sara"

💡 Rule: If you’re building objects with new, arrows are the wrong tool.

---

3. Breaking Event Handlers with Arrows

The Mistake

const button = document.querySelector("button");

button.addEventListener("click", () => {
  console.log(this); // ❌ Window, not the button
});

Why It Happens

Event listeners often rely on this being the element. Arrow functions don’t bind this, so you lose that reference.

The Fix

Use a regular function:

button.addEventListener("click", function () {
  console.log(this); // ✅ Refers to the button
});

💡 Rule: In event listeners, use regular functions if you want this to point to the element.

---

Wrapping It All Up

Here are the 3 most common mistakes with this in arrow functions:

1. Using arrows as object methods → breaks this.
2. Using arrows as constructors → not allowed.
3. Using arrows in event handlers → this won’t point to the element.

👉 The golden rule:

• Use arrow functions when you want lexical this (timers, callbacks, React methods).
• Use traditional functions when you need dynamic this (objects, constructors, DOM events).

---

Call to Action

👉 Have you been bitten by the “undefined this” bug before? Drop your story in the comments 👇.

📤 Share this with a teammate who still confuses arrow vs traditional functions.
🔖 Bookmark this as your quick this survival guide.