🎯Arrow Functions vs. Regular Functions in JavaScript

[MyrinNew]

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.

More...