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.- Desestructuración de Arrays

 

Creación de Array

const persona = ['Erik', 27 , 'Mexico'];

   Para llamar un elemento del array debemos hacerlo por índices , luego podemos guardarlo en una variable .

En este caso vamos a imprimirlos en consola, pero los usos pueden ser múltiples.

const persona = ['Erik', 27 , 'Mexico'];

const nombre = persona[0]

 const edad = persona[1]

 const pais = persona[2]

 

 console.log(edad)  // 27

Resultado de consola

 En caso de que nuestro array tenga muchos mas elementos o queramos llamarlos múltiples veces en nuestra aplicación , esto se empieza a complicar y dificultar su lectura.

ECMAScript 6 nos permite por medio de la siguiente sintaxis darle un nombre a cada elemento del Array de una forma mas legible.

const persona = ['Erik', 27 , 'Mexico'];

 const [nombre,edad,pais] = persona

 console.log(edad)

 

Resultado de consola

¿Que pasa si no queremos nombrar todos los elementos?

-Vamos a dejar sin nombrar el 2do elemento , simplemente dejando su espacio vacío.

const persona = ['Erik', 27 , 'Mexico'];

 const [nombre,,pais] = persona

 console.log(pais)

Resultado de consola

-Vamos a dejar sin nombrar el 1er elemento.

const persona = ['Erik', 27 , 'Mexico'];

const [ , edad,pais] = persona 

 console.log(pais)

Resultado de consola

Podemos combinar la Desestructuración con el parámetro rest  y con Parámetros por defecto.

La desestructuración también puedes usarse con objetos

Pero eso será cuestión de otros artículos , practica y domina este articulo antes de avanzar.

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.- Desestructuración de Objetos

                                 

Creación de Objeto

const persona = {

    nombre: 'Carlos',

    edad:'27',

    pais:'Mexico'

 }

 

La diferencia vendrá a la hora que necesitamos llamar a las propiedades del objeto

const persona = {

    nombre: 'Carlos',

    edad:'27',

    pais:'Mexico'

 }

 //Antes de Ecma 

console.log(`${persona.nombre} de ${persona.pais}`)

Resultado que devuelve la consola

Si durante nuestra aplicación ,tuviéramos que llamar a las propiedades de este objeto constantemente , necesitamos una opción limpia y rápida.

La desestructuración no es otra cosa que un método rápido de asignar valores en bloque.

//objeto 

const persona = {

    nombre: 'Carlos',

    edad:'27',

    pais:'Mexico'

 }

 

 const {nombre,edad,pais} = persona //desestructuracion

  //Despues de Ecma 

 console.log(`${nombre} de ${pais}`)

Resultado que devuelve la consola

Esta funcionalidad puede aplicarse tanto a arrays y a objetos.

otro uso más común de la desestructuración en JavaScript es cuando estamos programando en Node con paquetes y funciones externas. 

Conclusión

La desestructuración es muy utilizada cuando acedemos mucho a las propiedades de una objeto o un array para tener un código mas limpio 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

ECMAScript 6.- Témplate String (Cadenas de texto).

                              

En muchas ocasiones nos veremos obligados a concatenar variables con cadenas de texto.

-En versiones pasadas , debíamos concatenas con signos + y cerrando con comillas simples(') cada porción de texto . 

-Ahora en ECMAScript 6 si utilizamos comillas invertidas `` para escribir cadenas de texto , podemos incluir variables del siguiente modo  ${variable} .

EJEMPLO

En consola vamos a imprimir un mensaje que incluya 2 variables ya definidas.

//Declaramos variables

const nombre = 'Erik Navarrete';

const Template = 'estoy haciendo un Template Strings de modo'

//Sin ECMA6

console.log('Mi nombre es ' + nombre + 'y' + Template + ' antiguo')

//Con ECMA6

console.log(`Mi nombre es ${nombre} y ${Template} moderno`)

Conclusión

Con la llegada de ECMA6 se mejoro la forma de hacer

• Cadenas con variables dentro (interpolación).
• Generar cadenas multilínea.
• Ejecutar expresiones, funciones y etiquetados.

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 .- Parametro rest

                                    

 sin el Parámetro rest

Para este ejemplo definiremos una función y le pasaremos varios argumentos, que se guardaran en varios parámetros, e imprimiremos en pantalla

const persona= (nombre,edad,pais,altura,peso,genero) => {

   console.log(nombre,edad,pais,altura,peso,genero);

   }

   persona('Erik',27,'mexico',175,58,'hombre');

Lo que imprime la consola

En muchas ocasiones los argumentos a pasar son muchos mas , y tener que asignarles un parámetro a cada uno, a veces es eterno o teníamos que recurrir a algunos trucos.

  Tenemos una forma de pasar todos los argumentos 

rest

 ...nombredevariable . automáticamente se declarara la variable , y  guardara todos los argumentos que le pasemos en un único parámetro de tipo array. 

const persona= (...datos) => {  // Un solo parametro recibira los argumentos  

   console.log(datos);          // imprimimos un array

   persona('Erik',27,'mexico',175,58,'hombre');

Obtendremos nuestros datos en un array que después podemos utilizar como necesitemos.

Otra circunstancia 

Al primer argumento queremos darle un parámetro propio y todos los demás en un único parámetro rest

const persona= (nombrepersona , ...datos) => {    

   console.log(nombrepersona)

   console.log(datos);          

   }

   persona('Erik',27,'mexico',175,58,'hombre');

Podemos manipular por aparte ahora ambos parámetros.

Conclusión

Conocimos una alternativa a pasar varios argumentos , te recomendamos practicar mucho con diferentes ejemplo.

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.