DEV Community

Cover image for Regular Functions vs Arrow Functions in JavaScript
Mía Salazar
Mía Salazar

Posted on

Regular Functions vs Arrow Functions in JavaScript

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 this depending on how they’re called. this changes based on who calls the function.
const button = document.querySelector('#myButton');

button.addEventListener('click', function () {
  console.log(this); // 'this' = the button
});
Enter fullscreen mode Exit fullscreen mode

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. this comes 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
});

Enter fullscreen mode Exit fullscreen mode

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)

Enter fullscreen mode Exit fullscreen mode
  • 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]

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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)