miércoles, 11 de agosto de 2021

JavaScript.- Funciones.

 ¿Que es una función?


Iniciemos con 2 primicias básicas.

-Nos sirven para empaquetar código.

-Nos permiten utilizar este código donde y las veces que lo necesitemos.

Sintaxis básica y ejemplo


-Utilizamos la palabra reservada function
-le ponemos un nombre 
-Paréntesis ().- los cuales pueden recibir parámetros
-Corchete {} Código que guardara nuestra función  


function Nombre_Funcion (){

    console.log("Instruccion guardada")

}


Vamos a notar que al recargar nuestra pagina , la instrucción (console.log) no se ejecuta.

Recordemos ; Una función guarda código , mas no la ejecuta.

Invocar/Ejecutar una Función


Para ejecutar nuestra función ,simplemente debemos escribir su nombre ,seguido de paréntesis ()


Nombre_Funcion();


Código completo


function Nombre_Funcion (){

    console.log("Instruccion guardada")

}

Nombre_Funcion();




Bien hasta el momento , Probemos 2 cosas mas 

1) Escribiremos mas instrucciones en nuestro empaquetado


function Nombre_Funcion (){

    console.log("Instruccion guardada")
    console.log("podemos escribir")
    console.log("la cantidad de instrucciones")
    console.log("que queramos")

}

Nombre_Funcion();



2) Voy a invocar 2 veces nuestra función.


function Nombre_Funcion (){

    console.log("Instruccion guardada")
    console.log("podemos escribir")
    console.log("la cantidad de instrucciones")
    console.log("que queramos")

}

Nombre_Funcion(); 
Nombre_Funcion(); 





Todo bien hasta este momento

Recapitulemos 

Las funciones nos permiten empaquetar codigo/Instrucciones , que podemos invocar donde queramos, y las veces que queramos con tan solo escribir su nombre()

lo cual nos da un código mas legible , fácil de ordenar y reutilizable, lo que significa un código mas simplificado.

Funciones con parámetros


Un parámetro es una variable de tipo local (Que solo funciona dentro de la función). la cual recibe su valor en la invocación , vayamos al ejemplo.


function Nombre_Funcion (parametro_1){

    console.log(`Buena dia ${parametro_1}`)
    
}

Nombre_Funcion("carlos"); 




Recordatorio ; No se pueden usar los parámetros definidos fuera de la función (tienen un alcance solo local) 


function Nombre_Funcion (parametro_1){

    console.log(`Buena dia ${parametro_1}`)
    
}

Nombre_Funcion("carlos"); 

console.log(parametro_1) //Error


Escribir mas de 1 parámetro.


Podemos escribir tantos parámetros que necesitemos, tan solo en la construcción de la función, hay que separarlos por comas , y al invocarla sus valores también separarlas por comas , estas recibirán sus valores en el orden escrito

Ejemplo


function Nombre_Funcion (par_1,par_2,par_3){

console.log(`Soy ${par_1} tengo ${par_2} monedas de a ${par_3}`)
    
}

Nombre_Funcion("carlos"3 , peso); 

  


Ejemplo 2


function Nombre_Funcion (parametro_1,parametro_2,parametro_3){

    console.log(`Soy ${parametro_1} tengo ${parametro_2} monedas de a ${parametro_3} ` )
    
}

Nombre_Funcion("carlos"3 , "peso"); 
Nombre_Funcion("Erik"2 , "dolar"); 
Nombre_Funcion("Juan"4 , "franco"); 




Poco a poco nos damos cuenta la utilidad de las funciones para automatizar código.

Hemos echo una maquina donde construimos la estructura para solo mandarle datos y recibirlos ya procesados , un ejemplo de esto en la vida real es una calculadora.

hagamos una estructura simple de una calculador que suma 2 números. 


function Calc_Suma (num_1,num_2){

    let suma = num_1 + num_2
    console.log(suma)
}

Calc_Suma(3,4); // 7 
Calc_Suma(1,2); // 3
Calc_Suma(3,2); // 5




Funciona perfectamente , pero.. si no queremos imprimirlo en consola dentro de la función , y si queremos guardar el resultado para usarla mas adelante , y por mas adelante nos referimos a fuera de la función.

Tal como esta , la variable suma no puede usarse ya que su alcance es local 


function Calc_Suma (num_1,num_2){

    let suma = num_1 + num_2
}

Calc_Suma(3,4); // 7 

console.log(suma) // 7





Return


Esta funcionalidad lo que hará será pasar el valor que le escribamos proveniente dentro de nuestra función a nuestra invocación.


function Calc_Suma (num_1,num_2){

   return num_1 + num_2 //Envia valor

}

 Calc_Suma(3,4); //Recibe valor


Procedemos a guardarla en una variable , para poder manipular mas a gusto y en este caso la imprimiremos en consola.


function Calc_Suma (num_1,num_2){

   return num_1 + num_2 // 7

}

 let suma_1 = Calc_Suma(3,4); // 7 

 console.log(suma_1)




Listo , aprendimos a manipular el resultado de nuestra función fuera de esta.

Haremos un ejemplo; crearemos una función para calcular restas e imprimiremos varias

TRATA DE HACERLO SIN VER EL CODIGO...


function Calc_Resta (num_1,num_2){

   return num_1 - num_2 
 
}

 let Resta_1 = Calc_Resta(8,1);  
 let Resta_2 = Calc_Resta(7,2);  
 let Resta_3 = Calc_Resta(9,5);  
 let Resta_4 = Calc_Resta(6,2);  

 console.log(Resta_1)
 console.log(Resta_2)
 console.log(Resta_3)
 console.log(Resta_4)



Conclusión


En este articulo , hemos aprendido lo básico para escribir funciones ,suficiente para seguir avanzando en el curso , iniciar tus primeras practicas e incluso escribir tus primeras aplicaciones web .

A pesar de ser solo lo principal , tienes mucho material de donde practicar y experimentar.


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.





lunes, 9 de agosto de 2021

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 


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.


viernes, 6 de agosto de 2021

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



jueves, 5 de agosto de 2021

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




miércoles, 4 de agosto de 2021

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



Oxidative Stress and Sports

 Oxidative stress occurs when there is an imbalance in the body between free radicals and antioxidants. Free radicals are molecules with unp...