Suggest an edit

Improve this article

Refine the answer for “Arrow functions vs regular functions”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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 |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts687 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.