🎯Arrow Functions vs. Regular Functions in JavaScript

Source: Dev.to

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
this is determined by the call context. 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 the global scope, so it inherits the global this, not the user object.

✅ Correct Approach

Use a regular method when you need this to refer to the object:

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

user.greet(); // ✅ Richa

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

Arrow functions shine 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 a regular function were used 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 a 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.

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. ⚡