Cuándo (y por qué) debes usar las funciones flecha de ES6

Original article: When (and why) you should use ES6 arrow functions — and when you shouldn’t

Las funciones flecha (llamadas también “funciones de flecha gorda”) son indudablemente una de las características más populares de ES6 (EcmaScript 6). Ellas introducen una nueva forma de escribir funciones concisas.

He aquí una función escrita en sintaxis ES5:

function porDos(parametros) {  return parametros * 2}function porDos(parametros) {
  return parametros * 2
}

porDos(4);  // 8

Ahora, he aquí la misma función expresada como una función flecha:

var porDos = parametros => parametros * 2

porDos(4);  // 8

¡Es mucho más corto! Podemos omitir las llaves y la sentencia return debido a los retornos implícitos (pero sólo si no hay bloque — más sobre esto más adelante).

Es importante entender cómo la función flecha se comporta de manera diferente comparada con las funciones ES5 regulares.

Variaciones

Una cosa que notarás rápidamente es la variedad de sintaxis disponibles en las funciones flecha. Repasemos algunas de las más comunes:

1. Sin parámetros

Si no hay parámetros, puedes colocar paréntesis vacíos antes de =>.

() => 42

De hecho, ¡ni siquiera se necesitan los paréntesis!

_ => 42

2. Un solo parámetro

Con estas funciones, los paréntesis son opcionales:

x => 42  || (x) => 42

3. Muchos parámetros

Los paréntesis son obligatorios para estas funciones:

(x, y) => 42

4. Sentencias (a diferencia de las expresiones)

En su forma más básica, una expresión de función produce un valor, mientras que una sentencia de función realiza una acción.

Con la función flecha, es importante recordar que las sentencias deben tener llaves. Una vez que las llaves están presentes, siempre necesitas escribir return también.

A continuación un ejemplo de la función flecha usada con una sentencia if:

var alimentaAlGato = (gato) => {
  if (gato === 'hambriento') {
    return 'Alimenta al gato';
  } else {
    return 'No alimentes al gato';
  }
}

5. “Cuerpo del bloque”

Si tu función está en un bloque, debes usar también la sentencia return explícita:

var sumarValores = (x, y) => {
  return x + y
}

6. Objetos literales

Si estás devolviendo un objeto literal, debe ir entre paréntesis. Esto obliga al intérprete a evaluar lo que hay dentro de los paréntesis, y se devuelve el objeto literal.

x =>({ y: x })

Sintácticamente anónimas

Es importante notar que las funciones flecha son anónimas, lo que significa que no tienen nombre.

Este anonimato crea algunos problemas:

Más difíciles de depurar

Cuando obtengas un error, no serás capaz de rastrear el nombre de la función o el número de línea exacto donde ocurrió.

2. Sin autorreferencia

Si tu función necesita tener autorreferencia en algún punto (por ejemplo, recursión, controlador de evento que necesita desvincularse), no funcionará.

Principal beneficio: la no vinculación de 'this'

En las expresiones de función clásicas, la palabra reservada this está vinculada a diferentes valores en función del contexto en el que se llama. Sin embargo, con las funciones flecha, this está vinculada léxicamente. Esto significa que usa this desde el código que contiene la función flecha.

Por ejemplo, mira la función setTimeout:

// ES5
var objeto = {
  id: 42,
  contador: function contador() {
    setTimeout(function() {
      console.log(this.id);
    }.bind(this), 1000);
  }
};

En el ejemplo de ES5, es obligatorio .bind(this) para ayudar a pasar el contexto de this a la función. De lo contrario, this sería indefinido por defecto.

// ES6
var objeto = {
  id: 42,
  contador: function contador() {
    setTimeout(() => {
      console.log(this.id);
    }, 1000);
  }
};

Las funciones flecha de ES6 no pueden estar vinculadas a la palabra reservada this, así que léxicamente irán un ámbito arriba y usarán el valor de this en el ámbito en el que fue definido.

Cuándo no deberías usar las funciones flecha

Después de aprender un poco más sobre las funciones flecha, espero que entiendas que no reemplazan a las funciones regulares.

Aquí hay algunos casos donde probablemente no quieras usarlas:

Métodos de objetos

Cuando llamas a gato.saltos, el número de vidas no disminuye. Esto es porque this está vinculado a nada, y heredará el valor de this de su ámbito padre.

var gato = {
  vidas: 9,
  saltos: () => {
    this.vidas--;
  }
}

2. Funciones callback con contexto dinámico

Si necesitas que tu contexto sea dinámico, las funciones flecha no son la elección correcta. Mira este controlador de evento a continuación:

var boton = document.getElementById('press');
boton.addEventListener('click', () => {
  this.classList.toggle('on');
});

Si pulsamos el botón, obtendremos un TypeError. Esto es porque this no está vinculado al botón, sino a su ámbito padre.

3. Cuando hace tu código menos legible

Vale la pena tomar en consideración la variedad de sintaxis que cubrimos anteriormente. Con las funciones regulares, la gente sabe qué esperar. Con las funciones flecha, puede ser difícil de descifrar lo que estás viendo inmediatamente.

Cuándo debes usar las funciones flecha

Las funciones flecha brillan mejor con cualquier cosa que requiera que this esté vinculado al contexto, y no a la función en sí.

A pesar del hecho de que son anónimas, también me gusta usarlas con métodos como map y reduce, porque creo que hace mi código más legible. Para mí, los pros superan a los contras.

Gracias por leer mi artículo, ¡y compártelo si te gustó!