Funciones de flecha en JavaScript

Las funciones de flecha permiten una sintaxis en JavaSript que simplifica la forma de trabajar con funciones anónimas.

Como ejemplo vamos a calcular el doble de una serie de números que estan contenidos en una lista, en un array. Veamos varios métodos donde todos ellos nos permiten doblar los números de una lista y donde el último de todos estos métodos veremos que es el que tiene una sintaxis más limpia y abreviada. Se trata justamente de una función de flecha =>.

Usaremos la función map que en JavaScript actúa sobre una lista, obteniendo sus elementos uno a uno, los pasa por una función que trabaja con los elementos de forma individual y lo que devuelve es otra lista donde se han recompuesto los elementos de la lista original una vez pasados por la función. La función map no altera la lista original.

Doblamos los valores de un array por varios métodos

https://repl.it/@valoro/JS-funcion-flecha

Método 1: con map y una función externa

• Primero declaramos un array denominado numeros que contiene tres valores numéricos en forma de lista.
• Imprimimos los números iniciales
• Declaramos una función denominada doblaNumero con un único argumento denominado num que recoge cada uno de los números individuales y con un return devuelve ese número multiplicado por dos. Observe que el argumento num no es un array sino un único número que recibe la función y luego devuele su doble.
• Declaramos una variable denominada doblados que contiene un array con los valores numéricos doblados del array inicial. La forma de conseguir esto es mediante el uso de map que permite tomar el array numeros y pasárselo a la función doblaNumero tomando sus elementos de uno en uno, y volviendo a construir otro array con lo que devuelva esa función.
• Finalmente imprimimos la lista doblados mediante un concole.log.
• La función map toma una lista inicial y devuelve otra lista después de haber pasado sus elementos individualmente por una función a la que llama. La lista devuelta no anula la lista inicial y ésta continua existiendo.

 //declaramos un array de números  
 var numeros = [2,5,60];  
 console.log("Números iniciales: ",numeros);  
 //doblemos sus valores  
 //MÉTODO 1 con map y una función externa  
 function doblaNumero(num){  
  return num*2;  
 }  
 var doblados= numeros.map(doblaNumero);  
 console.log(doblados);  

El método 1 es mejorable y habitualmente la función a la que llama map no está fuera sino que se incluye como función anónima dentro de la función map. Veamos el método 2.

Método 2: con una función anónima

• Ahora metemos la función que dobla dentro de map como una función anónima.
• El return permite doblar usando la sintaxis *=. De esta forma num*=2 equivale a num=num*2.
• Finalmente imprimimos dobles que es el nuevo array con los valores ya doblados.

 //MÉTODO 2 con una función anónima  
 var dobles = numeros.map(function(num) {  
  return num*=2;  
 });  
 console.log(dobles);  

Método 3: con una función anónima, todo en una lína de código

Esta es una ligera variante del método anteiror. El código es el mismo pero lo ponemos en una sola línea de texto.

 //MÉTODO 3 con una función anónima, todo en una lína  
 console.log(numeros.map(function(num) {return num*2}));  

Método 4: con una función de flecha

Al fin podemos ver en el método 4 cómo se resuelve este ejemplo utilizando una función de flecha.

 //MÉTODO 4 con una función de flecha  
 console.log(numeros.map(num => num*2));  

Observe que la palabra function ha desaparecido y ahora simplemente lo que indicamos es que la variable auxiliar num se convierte en num*2 que es lo que retorna la función.

Elegante e intuitivo. Nos podemos aficionar a esta forma de trabajar.

Veamos otro ejemplo de funciones de flecha en JavaScript.

Cálculo de la longitud de los textos de una lista

Dada un array con el nombre de unas cuantas ciudades, deseamos obtener otro array que contenga la longitud de las cadenas de texto asociada a la lista de ciudades.

Longitudes de las cadenas

https://repl.it/@valoro/JS-funcion-flecha2

 'use strict'  
 var ciudades=["Roma","Madrid","Johannesburgo"];  
 console.log(ciudades.map(city => city.length));  

La variable city es una variable intrumental, la podríamos haber llamado item o con otro nombre.

Casos de uso de funciones de flecha

Veamos varios casos de uso de las funciones de flecha en JavaScript.

https://repl.it/@valoro/JS-funcion-flecha3

Caso 1

Una función de flecha con un único argumento num y una única operación de resultado num*2. Cuando el argumento es único podemos evitar pornelo entre paréntesis, pero cuando son dos o más los argumento de la función entonces deben ir entre paréntesis.
Cuando las líneas de código de la función son varias debemos ponerlas entre llaves {}, pero cuando es una única línea, como en este caso, podemos prescindir de las llaves.
Las funciones de flecha siempre son funciones anónimas y si se igulan a una variable con en ese caso el nombre de la variable hace el papel de nombre de función cuando las invocamos, como por ejemplo aquí que decimos doble(3), para conseguir doblar un número.

 //Caso 1  
 var doble=(num => num*2);  
 console.log(doble(3));  

Caso 2

En este caso vamos a sumar dos números, como se trata de dos argumentos a y b debenir entre paréntesis. En este caso hemos puesto return y entre llaves, pero esto es optativo.

 //Caso 2  
 var sumar = (a, b) => { return a+b; }  
 console.log(sumar(2,3));  

Caso 3

Este caso es igual al caso anterior pero hemos eliminado el return y las llaves {}.

 //Caso 3  
 var sumar = (a, b) => a+b  
 console.log(sumar(1,3));  

Caso 4

Podemos poner todo en una línea. La función va envuelta entre paréntesis y con un par de argumentos entre paréntesis, de esta forma la invocamos y la declaramos al mismo tiempo. Todo en uno.

 //Caso 4   
 console.log(((a, b) => a+b)(1,2));  

Caso 5

Veamos el caso de una función anónima que no tiene argumentos y que lo único que hace es saludarnos diciendo Hola. Si envolvemos la función entre paréntesis y luego le ponemos otros dos paréntesis () para invocarla habremos conseguido que la función se ejecute ella sola.

 //Caso 5   
 (() => { console.log("Hola"); })();  

Caso 6

Aquí además prescindimos de las llaves {}.

 //Caso 6   
 (() => console.log("Adios"))()  

Caso 7

Una forma curiosa de sumar dos números, usando funciones callback y la sintaxis de flecha.

 //Caso 7  
 function suma(fun1, fun2) {  
  console.log(fun1()+fun2());  
 }   
 suma(() => 10, () => 20);