Como as arrow functions diferem das funções regulares?

Question

IT Interview Practice · Accepted Answer

Arrow functions são mais concisas, mas as diferenças reais estão no **comportamento de binding**, não apenas na sintaxe.

```js
const regular = function () {};
const arrow = () => {};
const short = x => x * 2; // implicit return for one expression
```

## As principais diferenças

**1. Sem `this` próprio** — arrows herdam `this` do escopo envolvente. Esta é a diferença mais importante e por que elas são ótimas para callbacks:

```js
const timer = {
  seconds: 0,
  start() {
    setInterval(() => this.seconds++, 1000); // ✅ `this` is timer
    // a regular function here would have its own `this` (undefined) → bug
  },
};
```

**2. Sem objeto `arguments`** — use rest parameters em vez disso:

```js
const sum = (...args) => args.reduce((a, b) => a + b, 0);
```

**3. Não podem ser usadas como construtores** — `new arrow()` lança um erro, e elas não têm `prototype`.

## Quando NÃO usar arrow

```js
const obj = {
  name: "Ann",
  greet: () => `Hi ${this.name}`, // ❌ `this` is NOT obj (it's outer scope)
  greet2() { return `Hi ${this.name}`; }, // ✅ method needs dynamic `this`
};
```

Não use arrows para **métodos de objeto** (elas não vão fazer binding para o objeto) ou quando você precisa de um `this` dinâmico/`arguments` (event handlers que dependem de `this` ser o elemento).

## Por que isso importa

Use arrows para callbacks e funções curtas onde herdar `this` é o que você quer; use funções regulares para métodos, construtores e métodos de prototype.

As principais diferenças

Quando NÃO usar arrow

Por que isso importa

Perguntas relacionadas