JavaScript offers two main ways to declare functions: regular functions and arrow functions. While both can perform the same tasks, they behave differently in key areas, especially regarding this, arguments, and how they’re used in front-end development.
this Binding
- Regular functions get their own
thisdepending on how they’re called.thischanges based on who calls the function.
const button = document.querySelector('#myButton');
button.addEventListener('click', function () {
console.log(this); // 'this' = the button
});
In this case, this refers to the button that was clicked
- Arrow functions don’t have their own this; they inherit it from their surrounding scope.
thiscomes from where the function is written.
This makes arrow functions ideal in situations where you want to keep the context
const button = document.querySelector('#myButton');
button.addEventListener('click', () => {
console.log(this); // 'this' = window or outer scope
});
Here, this does not refer to the button.
Arguments Object
The arguments object is a built-in feature in regular functions in JavaScript. It contains an array-like list of all the values passed to that function, even if they weren’t defined as parameters.
- Regular functions have access to the arguments object, an array-like list of arguments passed to the function.
function showArguments() {
console.log(arguments);
}
showArguments('Hello', 42, true);
// Output: ['Hello', 42, true] (in modern browsers)
- Arrow functions do not have their own arguments. You need to use rest parameters instead (...args).
If you try to use arguments inside an arrow function, it won’t work the way you might expect. If you need to collect arguments in an arrow function, use the rest parameter syntax:
const showArguments = (...args) => {
console.log(args);
};
showArguments('Hello', 42, true);
// Output: ['Hello', 42, true]
Constructors
- Regular functions can be used as constructors with new.
function Person(name) {
this.name = name;
this.sayHello = function () {
console.log(`Hello, I'm ${this.name}`);
};
}
const user = new Person('Alice');
user.sayHello(); // Hello, I'm Alice
- Arrow functions cannot be used that way. They’re not constructors.
const Person = (name) => {
this.name = name;
this.sayHello = () => {
console.log(`Hello, I'm ${this.name}`);
};
};
const user = new Person('Alice'); // ❌ TypeError: Person is not a constructor
Syntax
- Arrow functions are more concise, especially for one-liners or callbacks.
Conclusion
Arrow functions and regular functions both allow you to define reusable blocks of code. However, they serve slightly different purposes in modern JavaScript.
Arrow functions are shorter, cleaner, and automatically bind this and arguments from their surrounding context. This makes them ideal for callbacks, array methods, and React components, where you want predictable scope and no surprises with this.
On the other hand, regular functions are more flexible when you need your function to have its own this, use the built-in arguments object, or act as a constructor with new. They are better suited for event handlers on the DOM, older codebases, or where full control over the function context is required.
Understanding when to use each helps keep your code readable, efficient, and bug-free, especially in front-end development where scope confusion is a common issue.
Top comments (0)