Las "arrow functions" de ES6 son una nueva manera de expresar las funciones de siempre, de un modo resumido y con algunas características nuevas que explicaremos en este artículo del Manual de ES6.

Aunque son comúnmente conocidas como arrow functions, también podrás oír hablar de ellas con su denominación en español, funciones flecha, o como "fat arrow functions", ya que para formar la flecha se usa una línea doble, del signo matemático igual "=".

Además de servir como azúcar sintáctico, son además una de las novedades más representativas de ES6, y que nos soluciona uno de los problemas más representativos y clásicos de Javascript en su versión ES5, el nuevo contexto generado por las funciones normales.

Cómo expresar una función con las arrow functions

Esta parte es bien simple, en vez de usar la palabra clave function se utiliza el símbolo de la flecha gorda, como se puede ver en el siguiente código:

let mifuncion = () => {
  //código de la función
}

Como has visto, no solo se usa la flecha, sino que los paréntesis donde se colocarían los parámetros de la función también se mueven de lado, colocándolos antes de la flecha.

La invocación de la función se realizaría como ya conoces.

mifuncion();

Parámetros de las funciones flecha

El tratamiento de los parámetros se realiza como hasta ahora, simplemente se colocan entre los paréntesis. Veamos este segundo ejemplo.

let saludo = (nombre, tratamiento) => {
  alert('Hola ' + tratamiento + ' ' + nombre)
}

//invocamos
saludo('Miguel', 'sr.');

El único detalle es que, en el caso que tengamos un único parámetro, podemos ahorrarnos colocar esos paréntesis.

let cuadrado = numero => {
  return numero * numero;
}

Ausencia de las llaves de la función

Existe otro caso especial, en el que podemos también ahorrarnos algún carácter extra, en este caso las llaves de apertura y cierre de la función. Sería cuando solamente tenemos una línea de código en nuestra función.

La función del saludo la podrías ver así también:

let saludo = (nombre, tratamiento) => alert('Hola ' + tratamiento + ' ' + nombre);

Ausencia de la palabra return

Si tenemos una única línea de código y la función devuelve un valor también nos podríamos ahorrar la palabra return, además de las llaves como se dijo antes.

La función del cuadrado de un número podría expresarse así.

let cuadrado = numero => numero * numero;

Código más compacto

Como ves, explotando todas las posibilidades de las funciones flecha, podemos obtener un código muy compacto. Para observar este hecho puedes compararlo con la declaración de una función de una manera tradicional en ES5:

var cuadrado = function(numero) {
  return numero * numero;
}

Quizás en la declaración de una función así sola en el código no se llegue a ver tanta ventaja, pero al tratarse Javascript de un lenguaje lleno de funciones callback se consigue bastante ahorro de líneas de código.

Mira este código asíncrono usando serTimeout():

setTimeout(function() {
  alert('me muestro pasado 1 segundo')
}, 1000);

Podrías verlo de esta manera usando arrow functions.

setTimeout( () => alert('Me muestro pasado 1 segundo'), 1000);

Pero todavía podemos captar más las ventajas de esta sintaxis ES6 en estructuras como las promesas. Como ya vimos en el artículo de promesas en ES6, se tienen que definir generalmente dos callbacks, uno para el caso positivo y otro para el negativo. Expresadas esas funciones con arrow functions quedaría como esto:

funcionQueDevuelvePromesa()
  .then( valor => alert(valor) )
  .catch( error => alert(error) );

Evitar generar un nuevo contexto en this

Las arrow functions de javascript son mayormente un azúcar sintáctico, pero la verdad es que no son exactamente iguales que las funciones tradicionales. Ahora vamos a ver qué diferencia tienen las funciones flecha con respecto a las funciones normales de Javascript.

Cuando usas funciones callback éstas generan un nuevo contexto sobre la variable "this". Es un efecto que si tienes experiencia con Javascript conocerás de sobra. En estos casos, para poder acceder al this anterior se hacían cosas como "var that = this", o quizás hayas usado el ".bind(this)" para bindear el contexto.

Por si no queda claro, mira el siguiente código:

var objTest = {
  retardo: function() {
    setTimeout(function() {
      this.hacerAlgo();
    }, 1000);
  },

  hacerAlgo: function() {
    alert('hice algo');
  }
}

objTest.retardo();

En la función setTimeout() estamos enviando un callback que genera un nuevo contexto, por tanto, no puedes acceder a this dentro de esa función. O mejor dicho, sí puedes acceder, pero no te devolverá lo que quizás se espere, que sería el propio objeto objTest. Es por eso que al ejecutar ese código te saldría un error:

Uncaught TypeError: this.hacerAlgo is not a function

Simplemente es que this ya no es el propio objeto y por tanto no existe el método que estás buscando.

La solución en ES5 pasaría por bindear this o cachear la referencia a this en una variable local que sí exista en el ámbito de la función callback. Realmente no importa mucho que veamos el código para resolver esto en ES5, ya que en ES6 y con las funciones flecha lo podríamos resolver de una manera mucho más elegante.

var objTest = {
  retardo: function() {
    setTimeout( () => {
      this.hacerAlgo();
    }, 1000);
  },

  hacerAlgo: function() {
    alert('hice algo');
  }
}

objTest.retardo();

Ahora la función enviada como callback a setTimeout() está definida con una arrow function y por tanto no genera contexto nuevo en la variable this. Es por ello que al intentar invocar a this.hacerAlgo() no generará ningún error y se ejecutará perfectamente ese método hacerAlgo().