Arrow Functions vs Regular Functions in JavaScript
How arrow functions differ from regular functions in JavaScript: lexical this, no arguments object, no constructor use, with examples and interview tips.
Expected Interview Answer
Arrow functions are a concise function syntax that does not bind its own this, arguments, super, or new.target; they inherit this lexically from the surrounding scope, while regular functions get their own this determined by how they are called.
A regular function's this is dynamic — it depends on the call site (method call, plain call, new, call/apply/bind). An arrow function has no this of its own, so it captures the this of the enclosing lexical scope at definition time and can never be rebound. Arrow functions also cannot be used as constructors, have no arguments object, and cannot be generators, whereas regular functions can do all three and are also hoisted when declared with the function keyword.
- Lexical this removes the need for self = this or bind in callbacks
- Shorter syntax for small callbacks and array methods
- Predictable this inside class methods and closures
- Regular functions still give you dynamic this and constructor support when you need them
- Implicit return keeps one-line expressions terse
AI Mentor Explanation
A regular function is like a substitute fielder who takes orders from whichever captain is on the field at that moment, so his instructions change match to match. An arrow function is like a player who always follows the coaching plan he was given at training — no matter which captain shouts, his 'this' stays the plan from where he was created.
Step-by-Step Explanation
Step 1
Compare the syntax
Write both forms: function add(a, b) { return a + b } versus const add = (a, b) => a + b, noting the arrow's implicit return.
Step 2
Inspect this in a method
Call a regular function as an object method and log this — it is the object. Do the same with an arrow and this is the outer scope, not the object.
Step 3
Test a callback
Inside setTimeout or an array method, a regular function loses this; an arrow keeps the enclosing this, removing the need for bind.
Step 4
Try to construct
Use new with a regular function — it works. Use new with an arrow — it throws 'is not a constructor'.
Step 5
Check arguments
Log the arguments object inside each; the regular function has one, the arrow must instead use rest parameters (...args).
What Interviewer Expects
- Clear statement that arrow functions bind this lexically
- Knowledge that regular functions' this depends on the call site
- Awareness that arrows cannot be constructors or generators
- That arrows have no arguments object or prototype
- A practical example such as a callback or class method
Common Mistakes
- Claiming arrow functions have their own this
- Using an arrow as an object method and expecting this to be the object
- Trying to instantiate an arrow function with new
- Assuming the arguments object exists inside arrow functions
- Thinking arrows and function declarations are hoisted identically
Best Answer (HR Friendly)
“Arrow functions are a shorter way to write functions that borrow their surrounding context instead of creating their own, which makes them ideal for callbacks. Regular functions are more flexible: they set their own context based on how they're called and can be used to build new objects.”
Code Example
const counter = {
count: 0,
// Regular function: this is the counter object
incRegular: function () {
this.count++;
},
// Arrow function: this is the outer (module/global) scope, not counter
incArrow: () => {
this.count++; // does NOT update counter.count
},
};
counter.incRegular();
console.log(counter.count); // 1
counter.incArrow();
console.log(counter.count); // still 1class Timer {
constructor() {
this.seconds = 0;
}
start() {
// Arrow keeps `this` bound to the Timer instance
setInterval(() => {
this.seconds++;
console.log(this.seconds);
}, 1000);
}
}
new Timer().start();Follow-up Questions
- How does the arguments object differ between the two function types?
- Why can't you use an arrow function as a constructor?
- When would you deliberately choose a regular function over an arrow?
- How do call, apply and bind interact with arrow functions?
- Are arrow functions hoisted the same way as function declarations?
MCQ Practice
1. How does an arrow function determine the value of this?
Arrow functions do not bind their own this; they capture it lexically from the scope in which they are defined.
2. What happens when you call an arrow function with the new keyword?
Arrow functions have no [[Construct]] internal method, so using new throws 'X is not a constructor'.
3. Which feature is available in a regular function but NOT an arrow function?
Regular functions expose the local arguments object; arrow functions do not, so they use rest parameters instead.
Flash Cards
How does an arrow function get its this? — Lexically — it inherits this from the enclosing scope and cannot be rebound.
How does a regular function get its this? — Dynamically from the call site: method call, plain call, new, or call/apply/bind.
Can an arrow function be a constructor? — No — using new throws because arrows have no [[Construct]] method or prototype.
Does an arrow function have an arguments object? — No — use rest parameters (...args) to collect arguments instead.