Difference between regular functions and arrow functions in JavaScript

According to MDN, an arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords. Arrow function expressions are ill suited as methods, and they cannot be used as constructors.

There are three key differences between regular functions and arrow functions in JavaScript that affect how they behave in your code.

No Own this Bindings

Arrow functions do not have their own this value. The value of this inside an arrow function is always inherited from the enclosing scope, while regular functions create their own this context.

this.a = 100;

let arrowFunc = () => {
    this.a = 150;
};

function regFunc() {
    this.a = 200;
}

console.log("Initial:", this.a);
arrowFunc();
console.log("After arrow function:", this.a);
regFunc();
console.log("After regular function:", this.a);

Initial: 100
After arrow function: 150
After regular function: 150

Notice that the arrow function changed the this object from the outer scope, while the regular function modified its own this context but didn't affect the global scope in this case.

Arrow Functions Do Not Have Arguments Object

Regular functions have access to an arguments object containing all passed parameters. Arrow functions do not have their own arguments object?they inherit it from the enclosing scope.

function regularFunction() {
    console.log("Regular function arguments:", arguments.length);
}

let arrowFunction = () => {
    try {
        console.log("Arrow function arguments:", arguments.length);
    } catch (error) {
        console.log("Arrow function error:", error.message);
    }
};

regularFunction(1, 2, 3);
arrowFunction(1, 2, 3);

Regular function arguments: 3
Arrow function error: arguments is not defined

For arrow functions, use rest parameters (...args) instead of the arguments object.

let arrowWithRest = (...args) => {
    console.log("Arrow function with rest parameters:", args.length);
};

arrowWithRest(1, 2, 3);

Arrow function with rest parameters: 3

Arrow Functions Are Callable But Not Constructable

Regular functions can be called normally or used as constructors with the new keyword. Arrow functions can only be called?they cannot be used as constructors.

function RegularFunction() {
    this.name = "Regular";
}

let arrowFunc = () => {
    this.name = "Arrow";
};

// Regular function as constructor (works)
let obj1 = new RegularFunction();
console.log("Regular constructor:", obj1.name);

// Arrow function as constructor (fails)
try {
    let obj2 = new arrowFunc();
} catch (error) {
    console.log("Arrow constructor error:", error.message);
}

Regular constructor: Regular
Arrow constructor error: arrowFunc is not a constructor

Summary Comparison

Conclusion

Choose arrow functions for shorter syntax and lexical this binding, especially in callbacks. Use regular functions when you need arguments object, constructor capability, or dynamic this context.