¿En qué se diferencian las funciones flecha de las funciones regulares?

Question

IT Interview Practice · Accepted Answer

Las funciones flecha son más cortas, pero las diferencias reales están en su **comportamiento de enlace (binding)**, no solo en la sintaxis.

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

## Las diferencias clave

**1. No tienen su propio `this`** — las flechas heredan el `this` del ámbito circundante. Esta es la diferencia más importante y por la que son excelentes para los 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. No tienen objeto `arguments`** — usa parámetros rest en su lugar:

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

**3. No se pueden usar como constructores** — `new arrow()` lanza una excepción, y no tienen `prototype`.

## Cuándo NO usar una flecha

```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`
};
```

No uses flechas para **métodos de objeto** (no se enlazarán al objeto) ni cuando necesites un `this`/`arguments` dinámico (manejadores de eventos que dependen de que `this` sea el elemento).

## Por qué es importante

Usa flechas para callbacks y funciones cortas donde heredar `this` es lo que quieres; usa funciones regulares para métodos, constructores y métodos de prototipo.

Las diferencias clave

Cuándo NO usar una flecha

Por qué es importante

Preguntas relacionadas