ECMAScript 6.- Funciones de Tipo Flecha

 ¿Qué son y para que sirven?

Nos permiten tener una alternativa a las funciones normales , pero con una sintaxis mas corta y mas legible, pero teniendo ciertas limitaciones.

¿Cómo escribirlas?

Antes de entrar en sus limitaciones , vayamos a un ejemplo practico.

//function normal

function Suma (a,b) {

        return a + b;

    }

    console.log(Suma(2,4)); //Resultado 6

1.- cambiamos la palabra function antes del nombre de la función , por un signo = después de esta

Suma = (a,b) {

        return a + b;

    }

    console.log(Suma(2,4)); //Resultado 6

 2.- Colocamos una flecha entre el o los argumentos y el cochete de apertura

    Suma = (a,b) => {

        return a + b;

    }

    console.log(Suma(2,4)); //Resultado 6

3.- Quitamos los corchetes y la palabra return (este esta implicito)

     Suma = (a,b) => a + b;

Veamos la diferencia al escribir ambas funciones.

//Funcion Normal

function Suma (a,b) {

    return a + b;

}

//funcion flecha

Suma = (a,b) => a + b;

-Si nuestra función solo recibe un parámetro podemos quitar los paréntesis alrededor de estos.

Ejemplo y comparación

//Function Normal

function duplicar_f (a) {

    return a * 2;

}

//Comprobemos que funciona

console.log(duplicar_f(3)); //Resultado 6

//function flecha 

duplicar = x =>  x * 2 ;

//Comprobemos que funciona

console.log(duplicar(3)); // 6

                                    

                             

Como hemos observado con funciones flecha hemos podido simplificar y tener un código mas legible.

Limitaciones 

• No tiene sus propios enlaces a this o super y no se debe usar como métodos.
• No tiene argumentos o palabras clave new.target.
• No apta para los métodos call, apply y bind, que generalmente se basan en establecer un ámbito o alcance
• No se puede utilizar como constructor.
• No se puede utilizar yield dentro de su cuerpo.

Hemos dado nuestros primeros pasos con funciones flecha , te invitamos a practicar hasta dominar lo aprendido hasta el momento.

Si no se recibe ningún argumento.

Necesitamos escribir los paréntesis

saludo = () => "hola a todos";

Te dejaremos un ultimo ejemplo de como recorremos un array en una aplicación real.

Recorrer Array

const amigos = ['Jose','Alexis','Eduardo'];

//antes de ECMA6

const amigos_function = amigos.map(function(amigo){

console.log(`mi amigo ${amigo} `)})

//con ECMA6

const amigos_flecha = amigos.map(amigo => {

    console.log(`mi amigo ${amigo} `)    

    })

A un hay mas detalles que revisar dentro de las funciones flechas , pero necesitamos practiques y domines este articulo en el cual aprenderás a como empezar a utilizarlas en tu aprendizaje o hasta en tus aplicaciones.

En el futuro veremos un articulo mas avanzado sobre funciones flecha.

Conclusión

Has aprendido lo básico para iniciar las funciones flechas y saber en que momentos poder utilizarlas para tener un código mas simplificado y legible.

Despedida

Esperemos te haya servido de utilidad este articulo , síguenos en nuestras redes sociales para seguir aprendiendo juntos , compártenos cualquier duda o comentario que te haya surgido , puede ayudarnos a crecer a ambos.

TE DEJAMOS UNA imagen que puedes guardar como apuntes de tu progreso.