Uso de funciones Flecha en javaScript

Las funciones flecha son una forma de resumir, y presentar de manera más compacta, las funciones de javaScript, y son especialmente útiles en funciones que incluyen un retorno de datos. La flecha en ese contexto puede entenderse como una equivalencia a la expresión return.

Cómo convertir una función clásica en función flecha paso a paso

Si la función no retorna datos el proceso es el mismo, dejaremos después de la flecha la instrucción o conjunto de instrucciones que tenga que ejecutar.

Partiendo de una función normal de javaScript que retorne datos, por ejemplo una función que devuelva el cuadrado de un número:

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

Paso 1

En primer lugar eliminamos la palabra function y añadimos la flecha para separar parámetros de cuerpo de la función:

        (numero) => {
            return numero * numero;
        }
    

Paso 2

Quitamos llaves y comando return del cuerpo de la función:

        (numero) => numero * numero;
    

Paso 3

Suprimimos los paréntesis de los argumentos de la función:

         numero => numero * numero;
    

Paso 4

Si queremos asignar un nombre a la función, usamos una variabe:

        let cuadrado = numero => numero * numero;
        console.log(cuadrado(8)); //muestra 64
    

Consideraciones

Aunque los paréntesis y las llaves se pueden suprimir en la función para una mayor simplicidad de escritura, pueden ser necesarios, y en caso de no usarlos encontrarnos con un error.

Paréntesis obligatorios

Los paréntesis son obligatorios cuando tenemos más de un argumento en la función, o cuando no tenemos ninguno. La razón es simple, javaScript no puede adivinar qué es argumento y qué no lo es en una lista de variables, por lo tanto hay que definirlos:

        let superficie = (base, altura) => base * altura;
    

Pero también así:

        let base = 10;
        let altura = 15;
        let superficie = () => base * altura;
    

Llaves obligatorias

Las llaves son obligatorias cuando la función tiene que ejecutar más de una instrucción antes del return. En este caso es obligatorio además, añadir la palabra return porque como en el caso de los paréntesis, el código no es capaz de adivinar qué dato es el que queremos devolver.

        let volumen = (base, altura) => {
            let profundidad = 10;
            return (base * altura * profundidad);
        }
    

Funciones flecha con Arrays

Dentro de los métodos para trabajar con arryas de datos, tenemos algunos de ellos que realizan tareas sobre cada uno de los elementos del array original y que pueden devolver nuevos arrays a partir de él. Estos métodos usan el comando return, y por lo tanto, pueden ser traducidos a una función flecha.

Dado este array:

         let valores = [10, 20, 30, 40];
    

Podemos usar el método map sobre él para obtener un nuevo array con los cuadrados de cada uno de esos valores. El método map es una función que recorre cada uno de los elementos del array para aplicar sobre él una función y acaba devolviendo un nuevo array. Dispone de 3 argumentos predeterminados: el valor actual del array, el índice del elemento y el array completo.

Una forma de obtener ese nuevo array sería:

        let cuadrados = valores.map(hazCuadrado);
        function hazCuadrado(x) {
            return x * x;
        }
    

Y la forma de resumir el mismo proceso en una función flecha:

        let cuadrados = valores.map( x => x * x);