What Are Arrow Functions and How Do They Differ from Regular Functions?

Arrow functions were introduced in ES6 (ECMAScript 2015) to simplify function syntax and improve readability. While they provide a cleaner way to write functions, they also behave differently from regular functions in some important ways.

Arrow Function Syntax

Here’s a simple comparison of traditional and arrow function syntax:

// Regular function
function add(a, b) {
  return a + b;
}

// Arrow function
const add = (a, b) => a + b;

Arrow functions can omit the return keyword and curly braces when there’s only one expression.

Key Differences

1. this Binding

The biggest difference is how this is handled.

const user = {
  name: "Amit",
  greet: function () {
    console.log("Hello, " + this.name);
  },
  greetArrow: () => {
    console.log("Hello, " + this.name);
  }
};

user.greet();       // "Hello, Amit"
user.greetArrow();  // "Hello, undefined"

Arrow functions don’t have their own this. They inherit it from the surrounding (lexical) scope.

2. No arguments Object

function showArgs() {
  console.log(arguments);
}
showArgs(1, 2); // [1, 2]

const showArrowArgs = () => {
  console.log(arguments);
};
showArrowArgs(1, 2); // ReferenceError: arguments is not defined

Arrow functions do not have their own arguments object. You should use rest parameters instead.

3. Cannot Be Used as Constructors

const Person = (name) => {
  this.name = name;
};

const p = new Person("Alice"); // TypeError: Person is not a constructor

You can’t use arrow functions with new — they can’t construct objects.

4. No super Binding

Arrow functions don’t have their own super, which makes them useful inside class methods when working with inheritance.

When to Use Arrow Functions

• When you need a concise function
• Inside array methods like map, filter, or reduce
• To avoid confusion with this in nested functions