Arrow functions vs regular functions

JavaScriptMiddle~2 min read

1. Syntax

Regular function:

javascript

function sayHello(name) {
  return `Hello, ${name}!`;
}

Arrow function:

javascript

const sayHello = (name) => `Hello, ${name}!`;

The short arrow syntax makes code shorter and is especially convenient in callbacks (map, filter, reduce, etc.).

2. Key differences

Feature	`function`	`=>` (arrow function)
`this`	Has its own `this` (depends on the call context)	Has no own `this` - takes `this` from the outer context
`arguments`	Has the `arguments` object	No `arguments`
`new` / constructor	Can be used with `new`	Cannot be used with `new`
`prototype`	Has one	Has none
`return`	Required explicitly (except for the short form)	Can be omitted if it is a single line
Support for `super` / `this` in classes	Works as usual	Captures the parent's `this` (convenient for handlers)

Example 1. The difference in `this`

Regular function

javascript

const user = {
  name: 'Tim',
  sayHi: function() {
    console.log(this.name);
  }
};

user.sayHi(); // 'Tim'

this inside a regular function refers to the object it was called from.

Arrow function

javascript

const user = {
  name: 'Tim',
  sayHi: () => {
    console.log(this.name);
  }
};

user.sayHi(); // undefined

this in an arrow function is not its own - it takes this from the outer lexical environment, and in this case that is the global context, where this.name is not defined.

Example 2. Using `this` inside a method with `setTimeout`

javascript

const user = {
  name: 'Tim',
  sayHi: function() {
    setTimeout(function() {
      console.log(this.name);
    }, 1000);
  }
};

user.sayHi(); // undefined (this refers to window)

Fixed with an arrow function:

javascript

const user = {
  name: 'Tim',
  sayHi: function() {
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }
};

user.sayHi(); // 'Tim'

Here the arrow function does not create its own this, so it takes it from sayHi() - which is the user object we need.

Example 3. `new` cannot be used with an arrow function

javascript

function User(name) {
  this.name = name;
}
const u1 = new User('Tim'); // works

const ArrowUser = (name) => {
  this.name = name;
};
const u2 = new ArrowUser('Tim'); // TypeError: ArrowUser is not a constructor

Arrow functions have no prototype and cannot be constructors.

Example 4. No `arguments`

javascript

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

javascript

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

Use rest parameters instead of arguments:

javascript

const showArgsArrow = (...args) => console.log(args);
showArgsArrow(1, 2, 3); // [1, 2, 3]

Example 5. Short form without `return` and `{}`

javascript

const double = x => x * 2;
console.log(double(4)); // 8

If the function is a single line, you can omit return and curly braces.

When to use each

Scenario	What to choose
Object / class methods (needs `this`)	`function`
Callbacks (`map`, `filter`, `reduce`, `forEach`)	`=>`
Event handlers in React classes (to avoid losing `this`)	`=>`
Constructors, prototypes	`function`
Short utility functions	`=>`

In short:

function is a universal tool with its own context, and can be a constructor. => is a compact form, without this, arguments , and prototype, ideal for nested functions and callbacks.

Quick summary table:

Difference	`function`	`=>` (arrow)
Has its own `this`	Yes	No
Can be called with `new`	Yes	No
Has `arguments`	Yes	No
Has `prototype`	Yes	No
Can be used as a method	Yes	Only without `this`
Convenient in callbacks	Moderate	Very
Short syntax	No	Yes

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.