Suggest an edit

Improve this article

Refine the answer for “When is it better not to use arrow 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)

Arrow functions (`=>`) are a convenient syntax, but **they are not always suitable**. There are situations where **you need to use a regular** `function`, otherwise the code will behave incorrectly or unpredictably.

---

## 1. When you need your own `this`

Arrow functions **have no own** `this` - they **inherit it from the outer context**.
That's why in **object methods** they often behave unexpectedly.

### Bad:

```javascript
const user = {
  name: 'Tim',
  sayHi: () => {
    console.log(`Hello, ${this.name}`); // this = undefined
  }
};

user.sayHi(); // "Hello, undefined"
```

### Good:

```javascript
const user = {
  name: 'Tim',
  sayHi() {
    console.log(`Hello, ${this.name}`);
  }
};

user.sayHi(); // "Hello, Tim"
```

---

## 2. When the function must be a **constructor**

Arrow functions cannot be called with `new` - they have **no internal** `[[Construct]]`.

### Error:

```javascript
const Person = (name) => {
  this.name = name;
};
const p = new Person('Tim'); // TypeError: Person is not a constructor
```

### Correct:

```javascript
function Person(name) {
  this.name = name;
}
const p = new Person('Tim');
```

---

## 3. When you need the `arguments` object

Arrow functions have no own `arguments`.

### Error:

```javascript
const sum = () => {
  console.log(arguments); // ReferenceError
};
sum(1, 2, 3);
```

### Correct:

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

(Or use rest parameters: `(...args) => {}`)

---

## 4. When the function is used as an **event handler** (`addEventListener`)

Sometimes `this` needs to refer to the element that fired the event.

### Won't work:

```javascript
button.addEventListener('click', () => {
  this.classList.add('active'); // this = window or undefined
});
```

### Correct:

```javascript
button.addEventListener('click', function() {
  this.classList.add('active'); // this = the button itself
});
```

---

## 5. When you need **dynamic binding** of `this` (`call`, `apply`, `bind`)

Arrow functions ignore methods like `.call()` and `.bind()`.

### Won't work:

```javascript
const greet = () => console.log(this.name);
greet.call({ name: 'Tim' }); // undefined
```

### Working variant:

```javascript
function greet() {
  console.log(this.name);
}
greet.call({ name: 'Tim' }); // Tim
```

---

## 6. When readability matters more than brevity

If a function is complex, long, or contains a lot of logic, an arrow function can hurt readability.
It's better to use a regular `function` with a clear body and name.

---

## Summary - **do not use arrow functions if:**

| Situation | Why |
|---|---|
| You need your own `this` | Arrow functions have none |
| You need `arguments` | Arrow functions have none |
| The function must be a constructor (`new`) | Arrow functions have no `[[Construct]]` |
| It's used as a DOM event handler | `this` will be lost |
| You need dynamic binding (`call`, `apply`, `bind`) | It's ignored |
| The function is large and complex | Readability suffers |

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.