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.

ECMAScript 6.- Parámetros por defecto.

 

Problema

Tenemos una función que deberá recibir un nombre y un teléfono dentro de sus parámetros , debemos escribirlos en la consola , pero... y si no se envía un teléfono. 

No recibir este dato ,muchas veces nos causa conflicto ya que su valor por defecto seria Undefined .

Solución 

Antes de ECMAScript 6 , teníamos que resolverlo implementando un Condicional..

/Antes de ECMA 6

function Usuario (nombre , Telefono){

    if (!Telefono){

        Telefono = '00000000'

    }

    return `Nombre : ${nombre}, Tel : ${Telefono}`

}

console.log(Usuario('Carlos'));

Con ECMAScript 6 , Al escribir los parámetros que vamos a recibir, podemos escribir un valor por defecto, en caso de no recibir ningún dato .

//Despues de ECMA 6 

function Usuario (nombre , Telefono='00000000'){

    return `Nombre : ${nombre}, Tel : ${Telefono}`

}

console.log(UsuarioECMA6('Carlos')); 

Los valores por defecto nos ahorran mucho código y limpieza en algo que es muy común a la hora de programar , te dejamos un ejemplo todavía mas simplificado y limpio , pero ahora con una función tipo flecha.

const Usuario = (nombre , Telefono='00000000') => `Nombre : ${nombre}, Tel : ${Telefono}`

console.log(Usuario('Carlos'));

Conclusión

                           Al definir los parámetros a recibir , podemos dejar un valor por defecto 

parametro='valor' 

en caso de que no le llegue uno

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