What are the differences between arrow functions and regular functions in JavaScript?

Key Differences

1. this Binding

This is the most important difference.

• Regular function: this is determined by how it's called (dynamic binding)
• Arrow function: this is determined by the enclosing scope at definition (lexical this)

const obj = {
  name: 'Alice',
  greetRegular: function() {
    setTimeout(function() {
      console.log(this.name); // undefined (this = global or undefined in strict mode)
    }, 100);
  },
  greetArrow: function() {
    setTimeout(() => {
      console.log(this.name); // 'Alice' (inherits outer this)
    }, 100);
  }
};

2. Cannot Be Used as a Constructor

Arrow functions cannot be called with new.

const Foo = () => {};
new Foo(); // TypeError: Foo is not a constructor

3. No arguments Object

function regular() {
  console.log(arguments); // Arguments object
}

const arrow = () => {
  console.log(arguments); // ReferenceError or outer arguments
};

4. No prototype Property

function Foo() {}
console.log(Foo.prototype); // { constructor: Foo }

const Bar = () => {};
console.log(Bar.prototype); // undefined

5. Cannot Be a Generator

Arrow functions cannot use yield.

When to Use

Scenario	Recommended
Dynamic this (object methods, constructors)	Regular function
Callbacks, event listeners, array methods	Arrow function
Need arguments object	Regular function