Conceptos básicos de las funciones flecha en JavaScript

Introducción a las funciones flecha

Las funciones flecha, introducidas en ES6 (ECMAScript 2015), son una forma concisa de escribir expresiones de función en JavaScript. Son especialmente útiles para funciones cortas y se usan en todas partes en las bibliotecas y aplicaciones modernas de JavaScript, en particular como callbacks pasados a métodos de array, temporizadores y manejadores de eventos.

Una función flecha es más que una sintaxis más corta. También se comporta de manera diferente a una función regular en un aspecto importante: no crea su propio this. Esta página cubre la sintaxis y ese comportamiento de this; para casos límite avanzados (sin arguments, sin new, generadores), consulta Funciones flecha, revisitadas.

Sintaxis básica

La forma general de una función flecha es:

let functionName = (param1, param2, ..., paramN) => expression;

Esto crea una función que toma param1, param2, ..., paramN como parámetros y devuelve el resultado de expression. El token => se lee como "va a" o simplemente "flecha".

La expresión de función tradicional equivalente tiene este aspecto — comparar las dos lado a lado muestra lo que la sintaxis de flecha omite:

La versión con flecha elimina la palabra clave function, las llaves y el return explícito. El resultado es el mismo.

Funciones flecha de una línea (retorno implícito)

Cuando el cuerpo es una sola expresión, puedes omitir las llaves y la palabra clave return. El valor de la expresión se devuelve automáticamente; esto se llama retorno implícito:

Funciones flecha multilínea (retorno explícito)

Si el cuerpo necesita más de una instrucción, envuélvelo en llaves {}. Una vez que usas llaves, el retorno implícito desaparece, por lo que debes escribir return tú mismo si quieres devolver un valor:

Olvidar el return dentro de las llaves es un error común para principiantes: la función entonces devuelve undefined.

Reglas de los paréntesis

Los paréntesis alrededor de los parámetros siguen reglas simples:

• Un parámetro: los paréntesis son opcionales — x => x * 2.
• Cero parámetros: los paréntesis vacíos son obligatorios — () => 42.
• Dos o más parámetros: los paréntesis son obligatorios — (a, b) => a + b.

Retornar un objeto literal

Para devolver un object con la sintaxis de retorno implícito, envuelve el object entre paréntesis. Sin ellos, JavaScript interpreta el { como el inicio de un cuerpo de función, no de un object literal, por lo que el cuerpo simplemente se ejecuta y devuelve undefined:

Ventajas de las funciones flecha

1. Concisión — Las funciones flecha tienen una sintaxis más corta en comparación con las expresiones de función tradicionales, lo que mantiene los callbacks legibles.
2. this léxico — Las funciones flecha no tienen su propio this. Toman this del ámbito circundante (padre), lo que elimina toda una clase de errores relacionados con la pérdida de this en callbacks.
3. Retornos implícitos — Con la sintaxis de una línea, el return es automático, lo que hace que las transformaciones cortas sean más limpias.

Cómo funciona this en las funciones flecha

Esta es la diferencia más importante entre las funciones flecha y las funciones regulares. Una función regular obtiene su propio this, determinado por cómo se llama. Una función flecha no tiene su propio this — lo busca en el ámbito donde fue definida. Esto se conoce como this léxico.

El problema clásico aparece dentro de un método que programa un callback. Con una función regular, el this del callback se pierde; con una función flecha, this se hereda:

Dado que la función flecha captura this de startArrow (donde this es el object counter), lee correctamente this.value. La función regular dentro de setTimeout se llama sin contexto de object, por lo que su this.value es undefined. Para una visión más detallada de cómo se determina this en los métodos regulares, consulta Métodos de object, "this".

Limitaciones de las funciones flecha

Las funciones flecha no son un reemplazo directo para todas las funciones. Su this léxico es exactamente lo que las hace inadecuadas en algunos contextos.

1. No son ideales como métodos de object — Dado que una función flecha hereda this del ámbito circundante en lugar del object sobre el que se llama, usarla como método generalmente no produce el resultado esperado.
2. No pueden ser constructores — Las funciones flecha no pueden usarse con new y lanzan un error si lo intentas; no son constructores.
3. Sin object arguments propio — Dentro de una función flecha, arguments hace referencia al del ámbito exterior, no a los argumentos pasados a la propia función flecha. Usa parámetros rest (...args) en su lugar.

El problema con los métodos en la práctica — this no apunta al object:

Cuándo usar cada una

• Opta por una función flecha para callbacks cortos: métodos de array, promesas, temporizadores y manejadores de eventos donde quieras conservar el this del entorno.
• Opta por una función regular cuando necesites un método que use this para referirse a su propio object, un constructor, o acceso al object arguments.

Ejemplos prácticos

Métodos de array

Las funciones flecha brillan con los métodos de array como map, filter y reduce, donde cada llamada es una pequeña transformación:

Manejadores de eventos

Las funciones flecha son convenientes para los manejadores de eventos, especialmente dentro de una clase u object donde quieres que this siga apuntando a la instancia circundante (este ejemplo usa el navegador, así que ejecútalo en una página en lugar de la consola):

document.getElementById("myButton").addEventListener("click", () => {
  console.log("Button clicked!");
});

Callbacks y promesas

Mantienen el código asíncrono compacto cuando se usan como callbacks:

Conclusión

Las funciones flecha son una característica versátil y cotidiana del JavaScript moderno. Proporcionan una sintaxis concisa, admiten retornos implícitos para cuerpos de una línea y — lo más importante — heredan this del ámbito circundante, lo que evita errores de contexto comunes en los callbacks. Son ideales para métodos de array, promesas y manejadores de eventos, pero no para métodos de object que dependen de su propio this, constructores o código que necesita el object arguments. Saber cuándo encaja cada tipo de función es la clave para usarlas bien. Continúa con Funciones flecha, revisitadas para los casos límite restantes.

Práctica