🎯Arrow Functions vs. Regular Functions in JavaScript

One of the most common sources of confusion in JavaScript interviews is how _this_ behaves differently in arrow functions vs regular functions. If you’ve ever wondered why _this_ prints _undefined_ sometimes — this guide will finally make it clear.

1️⃣ Regular Functions — this is Dynamic

In regular functions, the value of _this_ depends on how the function is called, not where it is defined.

const user = {
  name: 'Richa',
  greet: function () {
    console.log(this.name);
  }
};
user.greet(); // Richa
const greetCopy = user.greet;
greetCopy(); // ❌ undefined (or window.name in browsers)

Why this happens

Call ContextValue of _thisuser.greet()usergreetCopy()undefined_ (in strict mode)

So, when the function loses its object reference, _this_ no longer points to _user_.

2️⃣ Arrow Functions — this is Lexical

Arrow functions do not have their own _this_.
Instead, they inherit **_this_** from the surrounding scope.

const user = {
  name: 'Richa',
  greet: () => {
    console.log(this.name);
  }
};
user.greet(); // ❌ undefined

Why?

The arrow function was created in global scope → so it inherits the global _this_, not _user_.

✅ Correct Approach

Use a regular method instead:

const user = {
  name: 'Richa',
  greet() {
    console.log(this.name);
  }
};
user.greet(); // ✅ Richa

3️⃣ Best Use Case: Arrow Functions Inside Regular Functions

Arrow functions are perfect when used inside methods or callbacks, because they keep the same **_this_** context.

const team = {
  name: 'Frontend',
  members: ['Richa', 'Jane'],
  showMembers() {
    this.members.forEach(member => {
      console.log(`${member} is part of ${this.name}`);
    });
  }
};
team.showMembers();
// Richa is part of Frontend
// Jane is part of Frontend

If we had used a regular function inside _forEach_, _this.name_ would be _undefined_.

Interview-Ready Answer

Regular functions have a dynamic **_this_** — it depends on how they are called.
Arrow functions have lexical **_this_** — they inherit it from the parent scope.

🎯 Extra Tip

This is why arrow functions are commonly used in React components, where you want _this_ to stay consistent.

Key Takeaway

Arrow functions aren’t just a shorter way to write code — they preserve context.

| Feature                      | Regular Function  | Arrow Function |
| ---------------------------- | ----------------- | ---------------|
| Has its own `this`           | ✅ Yes            | ❌ No           |
| `this` depends on call site  | ✅ Yes            | ❌ No           |
| Best used for object methods | ✅ Yes            | ❌ No           |
| Best used for callbacks      | ❌ Often No       | ✅ Yes          |

Final Thought

Once you understand the difference between dynamic vs lexical _this_, your code becomes:

• Cleaner ✅
• Easier to reason about ✅
• Less bug-prone ✅

Arrow functions don’t just save syntax — they save context. ⚡

🙏 Stay Connected!

🔔 Follow for more guides on JavaScript, React.js & interview prep.