Arrow functions

A medida que trabajamos con Javascript, nos daremos cuenta que estamos continuamente creando funciones y funciones a lo largo de nuestro código. Sería ideal si tuvieramos una forma más compacta de escribir las funciones, y esto es justo lo que son las arrow functions.

¿Qué son las Arrow function?

Las Arrow functions, funciones flecha o «fat arrow» son una forma corta y compacta de escribir las funciones tradicionales de Javascript. A grandes rasgos, se trata de eliminar la palabra function y añadir el texto => antes de abrir las llaves:

const func = function () {
  return "Función tradicional.";
};

const func = () => {
  return "Función flecha.";
};

En principio, no hay ninguna diferencia más, y se ejecutan de la misma forma. Sin embargo, las funciones flechas tienen algunos matices y diferencias bastante interesantes:

• 1️⃣ Si el cuerpo de la función sólo tiene una línea, podemos omitir las llaves ({}).
• 2️⃣ En ese caso, se hace un return implícito, por lo que podemos omitir también el return.
• 3️⃣ Si la función no tiene parámetros, se indica como en el ejemplo anterior: () =>.
• 4️⃣ Si la función tiene un solo parámetro, opcionalmente te puedes ahorrar los paréntesis: e =>.
• 5️⃣ Si la función tiene 2 ó más parámetros, se indican entre paréntesis: (a, b) =>.
• 6️⃣ Si queremos devolver un objeto, que coincide con la sintaxis de las llaves, se puede englobar con paréntesis: ({name: 'Manz'}).

Por lo tanto, el ejemplo anterior se puede simplificar aún más:

// 0 parámetros: Devuelve "Función flecha"
const func = () => "Función flecha.";

// 1 parámetro:  Devuelve el valor de e + 1
const func = (e) => e + 1;

// 2 parámetros: Devuelve el valor de a + b
const func = (a, b) => a + b;

Las funciones flecha hacen que el código sea mucho más legible y claro de escribir, mejorando la productividad a la hora de escribir nuestro código. Sim embargo, también hay algunas diferencias más técnicas respecto a las funciones tradicionales. Vamos a profundizar en ellas.

Ámbito léxico de this

Aunque aún no hemos utilizado la palabra clave this, una de las principales diferencias de las arrow functions respecto a las funciones tradicionales, es el valor de la palabra clave this, que no siempre es el mismo.

Por ejemplo, si utilizamos una función de forma global en nuestro programa, no notaremos ninguna diferencia:

const a = function () {
  console.log(this);
};

a(); // Window

const b = () => {
  console.log(this);
};

b(); // Window

En ambos casos, el valor de this es el objeto global Window o globalThis, que es una referencia al objeto que representa la ventana o pestaña del navegador: si estamos en un contexto global, this hace referencia a esta ventana del navegador. Sin embargo, si utilizamos una función en el interior de un objeto, como suele ser el caso más habitual, si encontraremos diferencias.

Observa el siguiente código:

padre = {
  a: function () { console.log(this); },
  b: () => { console.log(this); },
};

padre.a(); // { a: f(), b: f() } (el padre)
padre.b(); // Window

Esta es una diferencia clave que hay que tener bien en cuenta a la hora de trabajar con las arrow function de Javascript:

• 1️⃣ En la función a(), una función tradicional, el this devuelve el objeto padre de la función.
• 2️⃣ En la función b(), una arrow function, el this devuelve el objeto Window o globalThis.

Cuando trabajamos con funciones tradicionales, el valor de this hace referencia a su «elemento padre». Sin embargo, cuando trabajamos con arrow functions, el valor de this no se establece. Esto es un punto muy interesante que podemos utilizar a nuestro favor cuando trabajamos con varios niveles de objetos o funciones.

Sin embargo, si combinamos funciones arrow dentro de funciones tradicionales, el this que usemos en una arrow function va a apuntar realmente al this de la función tradicional que se encuentre más cerca subiendo hacia sus padres. Por esta razón, una buena práctica es utilizar funciones tradicionales como las funciones de primer nivel y, luego, en su interior o en funciones callbacks, utilizar arrow functions.