What is the difference between arrow functions and regular functions in JavaScript?

Arrow functions have no own `this`, `arguments`, or `prototype`. Regular functions bind their own `this` at call time.

JavaScript

Overview

Arrow functions (`=>`) were introduced in ES2015 as a more concise syntax, but they also have an important behavioural difference: they do not have their own `this`. Instead they inherit `this` from the surrounding lexical scope.

Key Points

•Arrow functions: no own `this` they inherit it from the enclosing scope at definition time.
•Regular functions: `this` is determined at call time (depends on how the function is called).
•Arrow functions cannot be used as constructors (no `new`).
•Arrow functions have no `arguments` object use rest params `(...args)` instead.
•Use arrow functions for callbacks and short one-liners. Use regular functions for methods, constructors, and event handlers that need their own `this`.

Examples

this behaves differently in each

javascript

const obj = {
  name: 'Timer',
  startRegular() {
    setTimeout(function() {
      console.log(this.name); // undefined 'this' is the global/undefined in strict mode
    }, 100);
  },
  startArrow() {
    setTimeout(() => {
      console.log(this.name); // 'Timer' inherits 'this' from startArrow
    }, 100);
  },
};

Concise syntax for callbacks

javascript

// Arrow (concise great for callbacks)
const doubled = [1, 2, 3].map(n => n * 2);

// Single expression: implicit return (no braces needed)
const greet = name => `Hello, ${name}!`;

When to use a regular function (object method)

javascript

// Correct: regular function 'this' refers to the object
const counter = {
  count: 0,
  increment() { this.count++; }, // shorthand, same as regular function
};

// Wrong: arrow function captures outer 'this' (likely window/undefined)
const counter2 = {
  count: 0,
  increment: () => { this.count++; }, // bug! 'this' is not the object
};

Pro Tip

Default to arrow functions for everything except: object methods, prototype methods, constructors, and functions that use the `arguments` object. When you need `this` to refer to the calling context, use a regular function.