Arrow Functions en ES6

2 minutos de lectura

Fecha: 22/6/2017

Las Arrow Functions tienen gran peso en ES6, de hecho esta manera de declarar una función tiene características muy interesantes, como es costumbre dejo un enlace a la documentación oficial.

Un punto importante es aclarar que es una manera de declarar una función, pero no sustituye a la forma tradicional de manera que podemos escoger una u otra en función de lo que queramos conseguir.

Sintaxis

La sintaxis básica es parámetros => expresión pero existen distintas reglas según el número de parámetros o sentencias que ejecute, lo explicamos.

• Si la función no tiene parámetros debemos usar los paréntesis.
• Si la función tiene 1 solo parámetros podemos omitir los paréntesis.
• Si la función tiene más de 1 parámetro debemos usar los paréntesis.

Parece un lio pero según estas reglas estos ejemplos son válidos.

// Sin parámetros
var resultado = () => {};  

// Con un parámetro
var resultado = a => {};  
// Con un parámetro
var resultado = (a) => {};  

// Con varios parámetros
var resultado = (a, b, c) => {};

Como se aprecia los paréntesis los podemos usar siempre, y solo podemos prescindir de ellos cuando pasamos un único parámetro.

La otra regla importante y que prácticamente es igual que esta es la del número de sentencias de las que se compone nuestra función:

• Si la función no tiene sentencias (menuda tontería) debemos usar las llaves.
• Si la función tiene 1 sola sentencia podemos omitir las llaves.
• Si la función tiene más de 1 sentencia debemos usar las llaves.

Al igual que antes estos son los ejemplos de uso

// Con una sentencia 
var resultado = a => a*10;  
// Con una sentencia 
var resultado = a => { return a*10 };  

// Con varios parámetros
var resultado = (a, b, c) => { return a+b+c };

Por tanto las llaves los podemos usar siempre, y solo podemos prescindir de ellas cuando tenemos una única sentencia.

Otro aspecto a tener en cuenta es que si usamos llaves es necesario que también usemos return para indicar que retorna nuestra función, si no las usamos se interpreta que el resultado de la expresión ya es el resultado a retornar.

* Si usamos llaves y no ponemos un return devuelve undefined.

¿Y si lo que queremos que devuelva la función es un objeto?

Entonces deberíamos encapsular las llaves entre paréntesis como en el siguiente ejemplo.

// Con una sentencia 
var resultado = a => ({id: id, nombre: "Óscar"});  

Características

De las características de las Arrow Functions en ES6, tal vez la más destacable sea que mantiene su contexto en todo su interior.

Que lo haga es una gran novedad ya que hasta ahora cuando dentro de una función declarábamos funciones de callback estas al mismo tiempo generaban su propio contexto, de manera que cuando usábamos la palabra reservada this en su interior apuntaba a este y no a la función que lo había invocado.

Por esta cuestión había ocasiones en las que nos veíamos forzados a guardar el contexto en una variable de esta manera var self = this; o var _this = this; para luego acceder en los callbacks o que usábamos o usar un bind para que esa nueva función tenga el mismo contexto.

Si quieres saber como se usa el bind en este artículo se explica.

Las Arrow Functions, ya hacen por nosotros bind automáticamente de manera que this en su interior siempre apunta al contexto de la Arrow Function.

Aunque no siempre será lo deseado debemos evaluar nuestro código para ver en que casos nos compensa y en cuales no.