← Back to libraryQuestion 135 of 468
🟨JavaScriptIntermediate

Arrow Functions vs Regular Functions

📌 Definition:

Arrow functions are a concise function syntax introduced in ES6. Beyond brevity, they differ from regular functions in how they handle 'this', 'arguments', and their inability to be used as constructors.

📖 Detailed Explanation:

Regular functions get their own 'this' (bound by the call-site) and their own 'arguments' object, and can be called with new. Arrow functions have NO own 'this' — they inherit it lexically from the surrounding scope — no 'arguments' object (use rest parameters instead), cannot be used as constructors (no new), and have no prototype property. This makes arrows perfect for callbacks and array methods where you want to preserve the outer 'this', but wrong for object methods that rely on dynamic 'this' or for constructors.

🔑 Key Points:
  • Arrows inherit 'this' lexically; regular functions bind 'this' at call-time
  • Arrows have no 'arguments' object — use (...args) rest
  • Arrows cannot be constructors (no new) and have no prototype
  • Use arrows for callbacks; use regular functions for object methods/constructors
🌍 Real-World Example:

In a test helper, arr.map(item => this.transform(item)) keeps 'this' as the test class instance, whereas arr.map(function(item){ return this.transform(item); }) loses it. But defining an object method as greet: () => this.name breaks, because the arrow's 'this' is the module/global, not the object.

🎯 Scenario-Based Interview Question:

When should you NOT use an arrow function? Give two concrete cases.