Rambling Javascript #2: Fat arrow functionsContinuamos nuestro camino indagando sobre diversos aspectos de JavaScript. En este caso vamos a comentar sobre uno de los añadidos más relevantes que se hicieron con ES6EcmaScript 2015). Estamos hablando de las Fat arrow functions. Con su uso conseguiremos un código más legible y compacto.
Sin embargo, es conveniente hacer hincapié en algunos puntos que pueden pasarse de largo a la hora de trabajar con ellas. Comenzamos.

Sintaxis

Tomaremos como base un ejemplo básico de función escrita en ES5. En este caso la función add tiene como argumentos dos números y nos devuelve la suma. [crayon-59c6711de6448804607797/] Código totalmente correcto, pero quizás un pelín verboso para lo que realmente hace, que es la suma de dos números. De ahí partimos con las fat arrow function. En un primer momento podemos sustituir la palabra reservada function por el símbolo siguiente =>, conocido como fat arrow, quedando la expresión de la siguiente forma: [crayon-59c6711de6469183520927/] Hemos reducido algunos caracteres, pero la mejora tampoco es demasiado sustancial. Sin embargo, podemos seguir trabajando en la expresión. El siguiente aspecto en el que podemos dar cuenta, es que nuestra función consta de una única expresión. En casos como éste, podemos igualmente quitar la palabra reservada return e, incluso, quitar las llaves delimitadora de la función. Con ello, la palabra reservada return quedaría implícita en la única expresión de la que constaría nuestra función. Por lo tanto: [crayon-59c6711de6482364400029/] Creo que se intuye que extendiendo su uso conseguiremos un código más claro y limpio. El siguiente ejemplo también nos permite presentar un nuevo detalle relativo a la sintaxis: Rambling Javascript #2: Fat arrow functions Efectivamente, también hay puntos que aclarar sobre la sintaxis relativo a los argumentos:
  • En funciones sin argumentos, o con dos o más, es necesario rodearlos con paréntesis:
[crayon-59c6711de6499114507402/]
  • Sin embargo, cuando tengamos un sólo argumento, los paréntesis son opcionales, tal y como hemos visto en el ejemplo previo.

Uso en casos reales

Todo lo que se ha comentado está bien, pero realmente, y con los ejemplos vistos, tampoco parece un cambio demasiado relevante.
Sin embargo, cuando nos vamos a casos un poco más realistas, es donde empezamos a observar su valía. El ejemplo más claro en el que es muy útil su uso es en los predicados que utilizamos en las funciones para tratar con colecciones.
Mostramos el típico ejemplo de un array de números, y queremos extraer aquellos cuyo valor sea mayor o igual que 5: [crayon-59c6711de64af222120774/] En este caso, utilizando fat arrow functions, nuestro ejemplo quedaría de la siguiente forma: [crayon-59c6711de64c5505963932/] La mejora queda clara en cuanto a legibilidad. Imaginemos su uso en callbacks, donde ayudaran, sino a reducir, sí a mejorar, el temido callback hell en javascript.

Comportamiento de this

Todo lo comentado tiene su valor, pero donde realmente está el factor diferenciador de las fat arrow function respecto al empleo de las funciones tradicionales es en el cambio de comportamiento que ha sufrido this. Cualquier persona que haya trabajado con un código JavaScript relativamente complejo, saliendo de los ejemplos básicos, habrá obtenido comportamientos no esperables de this. ¿Cuántos hemos hecho uso de alguno de los siguientes workarounds?:
  • Guardarnos el contexto en una variable para poder utilizarlo en el callback. Todos hemos hecho alguna vez:
[crayon-59c6711de64db681377238/]
  • Utilizar el bind(this), a la hora de definir una función.
Con el uso de las fat arrow functions esto ya no será necesario, ya que, por defecto, this se va a referir al contexto donde la función haya sido declarada. Lo vemos con el ejemplo siguiente: [crayon-59c6711de64f1525014649/] Si ejecutamos el ejemplo obtenemos lo siguiente: [crayon-59c6711de6507591276008/] ¿Qué está ocurriendo? Pues lo que todos sabíamos de antemano, el this dentro de la función que se ejecuta en el map no es el que cabría esperarse (el objeto testObject, sino que es el contexto global, donde, lógicamente, no está definido title). Esto lo resolveríamos en ES5 con una de las formas siguientes: [crayon-59c6711de651d956388230/] [crayon-59c6711de6532376972782/] Mientras que, usando fat arrow function, el ejemplo quedaría: [crayon-59c6711de6548765727956/] En todos los casos el resultado sería el esperado: [crayon-59c6711de655e440713792/]

Conclusiones

En este caso no hay mucho que comentar:
  • Sintaxis más sencilla.
  • Código más legible.
  • Facilidad a la hora de escribir callbacks o predicados.
  • Quita problemas al usar this
Todo son ventajas. En la siguiente entrega hablaremos de los operadores rest / spread y de los valores por defecto que podemos indicar a nuestras funciones.