sintaxis
Con las funciones flecha, buscamos simplificar todo lo anterior de un modo mucho más directo y declarativo:
Eliminamos la palabra reservada function y nos limitamos a recoger los parámetros mediante los paréntesis tradicionales.
Podemos eliminar las llaves que delimitan el scope abriéndolo con una flecha.
Podemos eliminar la palabra reservada return.
saluda:()=>{
}
Las funciones flecha son siempre anónimas. Estamos utilizando una estructura declarativa donde asignamos la función a una variable. Eso nos permite su reutilación, pero por definición, estas funciones son anónimas.
La sintaxis es mucho más limpia y simple. Superado el shock inicial de su estructura, rápidamente nos acostumbramos y la forma tradicional comienza a parecer verborreica (sí, el tan frecuente verbose anglosajón existe en castellano, ¿por qué no usarlo?).
#Preguntas rápidas que se nos echan encima
¿Qué ocurre si solo tenemos un parámetro, o ninguno, o infinitos?
¿Qué ocurre si nuestra función necesita realizar varias operaciones?
¿Cómo desarrollo el cuerpo si no he visto llaves? ¿Cómo indico el valor de retorno?
Se ha mencionado más arriba pero,
¿qué ha cambiado en el this?
Vamos a ir viendo ejemplos…
#Si solo tenemos un parámetro, podemos obviar el paréntesis:
var double = x => x * 2;
console.info( double( 2 ) ); // 4
console.info( double( 5 ) ); // 10
Si no necesitamos parámetros, tenemos que incluir el paréntesis vacío:
var hi = () => 'Hello World';
console.info( hi() ); // Hello World
Si necesitamos una entrada más compleja, un aspecto importante es que el objeto arguments no funciona:
var test = () => arguments;
console.info( test( 'foo', 'bar' ) ); // ERROR: arguments is not defined
Sin embargo, el operador de arrastre sí lo hace correctamente:
var test = ( ...args ) => args;
console.info( test( 'foo', 'bar' ) ); // [ 'foo', 'bar' ]
Si necesitamos incluir varias instrucciones en nuestra función, entonces necesitamos incluir las clásicas llaves y el retorno:
var foo = ( param1, param2 ) => {
var result;
// Do amazings things here...
return result;
};