Funciones flecha frente a funciones normales

Una función flecha es una forma más corta de escribir una función, pensada para operaciones breves y callbacks; además no tiene su propio this. Para la mayoría de los casos cotidianos funcionan igual que una función normal.

Sintaxis

// Función tradicional
function doble(n) {
  return n * 2;
}

// Función flecha equivalente
const dobleFlecha = (n) => {
  return n * 2;
};

// Con return implícito (una sola expresión)
const dobleCorto = n => n * 2;

console.log(doble(4), dobleFlecha(4), dobleCorto(4)); // 8 8 8

Reglas de la forma corta:

• Con un solo parámetro, los paréntesis son opcionales: n => n * 2.
• Sin parámetros o con varios, se necesitan: () => 1, (a, b) => a + b.
• Si el cuerpo es una expresión sin llaves, el valor se devuelve automáticamente.
• Para devolver un objeto literal, envuélvelo entre paréntesis: () => ({ ok: true }).

Dónde brillan: callbacks

const precios = [10, 20, 30];
const conDescuento = precios.map(p => p * 0.9);
const caros = precios.filter(p => p > 15);

Es el uso más frecuente porque evita ruido visual.

Diferencias importantes

1. this

Una función normal calcula this según cómo se llama. Una función flecha toma el this del lugar donde se escribió.

const contador = {
  valor: 0,
  iniciar() {
    setTimeout(() => {
      this.valor++;           // this es contador
      console.log(this.valor); // 1
    }, 100);
  }
};
contador.iniciar();

Con function () { ... } dentro del setTimeout, this no sería contador. Por eso las flechas son cómodas dentro de métodos.

La contrapartida: no uses flechas como métodos de un objeto si necesitas this de ese objeto:

const usuario = {
  nombre: 'Ana',
  saludar: () => 'Hola, ' + this.nombre // this no es usuario
};

2. No se pueden usar como constructores

const Punto = (x, y) => {};
new Punto(1, 2); // TypeError: Punto is not a constructor

3. No tienen arguments propio

Dentro de una flecha no existe arguments de la función. Usa parámetros rest: (...args) => args.length.

4. Hoisting

Una función declarada con function nombre() {} puede usarse antes de su línea. Una flecha asignada a const no.

¿Cuál usar?

• Para callbacks y funciones pequeñas: flecha.
• Para funciones con nombre que se reutilizan, métodos de objeto o constructores: function o la sintaxis abreviada de método.
• Prioriza la legibilidad: una flecha de cinco líneas sin nombre en una variable no ayuda a nadie.

Última actualización: 18 de octubre de 2026. Los ejemplos se han comprobado en un navegador actual y en Node.js.