Hiprup

What is the difference between arrow functions and regular functions?

Arrow functions are a shorter syntax with important behavioural differences from regular functions.

  • this binding — arrows have no own this; they inherit it from the surrounding scope. Regular functions set this based on how they're called.

  • arguments object — regular functions have one; arrows don't (use rest parameters).

  • Constructors — regular functions work with new; arrows cannot.

  • Syntax — arrows allow an implicit return for single expressions.

Choose well: use arrows for callbacks and short functions; use regular functions for object methods and constructors that need their own this.

// this behavior — the key difference
const obj = {
  name: 'John',
  // Regular function: this = obj
  greetRegular: function() {
    console.log(`Hello, ${this.name}`);
  },
  // Arrow function: this = enclosing scope (NOT obj)
  greetArrow: () => {
    console.log(`Hello, ${this.name}`); // undefined!
  },
  // Arrow in callback (useful!)
  delayedGreet: function() {
    setTimeout(() => {
      console.log(`Hello, ${this.name}`); // 'John' — inherits this from delayedGreet
    }, 100);
  }
};

obj.greetRegular();  // 'Hello, John'
obj.greetArrow();    // 'Hello, undefined' (this is global/window)
obj.delayedGreet();  // 'Hello, John' (arrow inherits this)

// No arguments object
function regular() {
  console.log(arguments); // [1, 2, 3]
}
const arrow = (...args) => {
  console.log(args); // [1, 2, 3] — use rest params
  // console.log(arguments); // ReferenceError!
};

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

greetRegular's this is obj (called as obj.greetRegular). greetArrow's this is the enclosing scope (module/window), NOT obj. In delayedGreet, the arrow function inside setTimeout inherits this from delayedGreet (which is obj) — this is the primary use case for arrows.

No arguments: use ...args instead. Cannot use new with arrows.

this is the #1 difference: arrow functions inherit this lexically. Show the setTimeout callback use case (why arrows are useful).

Know the three things arrows cannot do: own this, arguments object, and constructor (new). Arrow functions as object methods is a common bug to demonstrate.

What is the difference between arrow functions and regular functions? | Hiprup