Funciones flecha en Javascript

Funciones flecha en Javascript

Javascript

Las funciones flecha de Javascript han sido introducidas en ES6 (EMACScript 2015) y consisten en una alternativa compacta a las funciones tradicionale de Javascript.

Debemos tener en cuenta que esta alternativa es limitada y no se puede utilizar e cualquier situcaión.

Función tradicional VS función flecha

En este ejemplo veremos una función simple que suma dos valores. En primer lugar tenemos la versión tradicional:

function suma(a, b){
        return a + b;
    }

En segundo lugar, la misma función pero en función flecha:

var suma = (a, b) => a + b;

En ambos casos, la invocación derá la misma:

suma(1,4);

La transformación de una función real a una función flecha se realiza del siguiente modo:

  • Eliminamos la palabra reservada function
  • Eliminamos las llaves que delimitan el scope. Esto es opcional.
  • Eliminamos la palabra reservada return. Esto es opcional.

Las funciones flecha son anónimas, aunque sí podemos reutilizarlas.

Ejemplo con 1 sólo parámetro

Si en nuestra función sólo necesitamos un parámetro, podremos hacer algo similar:

var cuadrado = a => a * a;

cuadrado(3); // 9

En este caso, no hemos utilizado los paréntesis antes de la flecha, aunque si los utilizamos, funcionará correctamente.

Ejemplo sin parámetros

Si no necesitamos enviar parámetros, simplemente utilizaremos los paréntesis vacíos.

    var hoy = () => new Date().toISOString().slice(0, 10);
    
    hoy(); // 2015-10-12 

Ejemplo con múltiples instrucciones

En este ejemplo no sería necesario utilizar varias instrucciones, pero nos sirve para la explicación.

No vamos a pasar parámetros, por ello utilizamos los paréntesis vacíos.

Al realizar varias instrucciones, para encapsulrlas utilizaremos las llaves después de la flecha. Además necesitaremos hacer uso de la palabra reservada return.

var hoy = () => {
        var resultado = "Hoy es ";
        resultado += new Date().toISOString().slice(0, 10);
        
        return resultado;
    }
    
    hoy(); // Hoy es 2015-10-12 

Ejemplo con un número indefinido de argumentos

Si queremos utilizar un número indefinido de argumentos, esta será la forma:

var media = (...args) => {
        var suma = 0;
        for(i=0; i< args.length; i++)  suma += args[i];
        
        return suma/args.length;
    }
    
    media(2, 4); // 3 

En este caso utilizamos el operador de arraste (…) para poder enviar un número indefinido de parámetros a la función.

Escribe una respuesta