FULL STACK

Comenzamos en unos
minutos
Javascript: Clase 4
Asincronía y Event Loop
academianumen.com
 setTimeOut()

El setTimeOut() es un método que recibe una función y nos permite establecer el momento
de ejecución.

Este método recibe 2 parámetros: Por un lado la función a ejecutar y por otro lado el
tiempo que queremos que tarde en ejecutarse.

setTimeout(function() {
console.log('Ejecutando un setTimeOut')
}, 1000);

academianumen.com
 setInterval()
El setInterval() es un metodo similar al setTimeOut() con la diferencia que en lugar de
ejecutarse una única vez, se repite una y otra vez cada vez que transcurre el tiempo que se
le indico como parametro.

setInterval(() => {
console.log('Ejecutando un setInterval')
}, 1000);

setInterval(() => {
console.log(new Date().toLocaleTimeString())
}, 1000);

academianumen.com
 Caracteristicas de Javascript
1- Es un lenguaje de programación de un solo subproceso o hilo (single
thread), lo que significa que sólo puede ejecutar una cosa a la vez.

2- Su modelo está basado en un loop (ciclo) de eventos.

3- Al no poder procesar instrucciones simultáneas necesita de un

modelo asíncrono para realizar largas solicitudes de red sin bloquear el
hilo principal, ahorrando cualquier clase de problema de concurrencia.

academianumen.com
 Ciclo de eventos / Event loop

academianumen.com
 Modelo de Event Loop

En este programa podremos ver de manera dinámica cómo funciona el event loop.

Vamos a ello!!
http://latentflip.com/loupe/?code=!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D

academianumen.com
 LIFO: Last in - First out
Modelo Sincrono
Este es el formato en el que Javascript console.log('Codigo Sincrono');
procesa las instrucciones. Cuando una console.log('Inicio');
instrucción se dispara, se une a la cola
de espera, pero se pone en primer lugar. function dos() {
De este modo, la última instrucción en console.log('Dos');
unirse es la primera en ejecutarse. }

Esto permite a las instrucciones que function uno() {

estaban en espera ejecutarse apenas se console.log('Uno');
resuelven evitando que se bloqueen dos();

otras instrucciones ya sea en la espera console.log('Tres');

}
de resolución como en la espera de
ejecución.
uno();
Veámoslo en código:
console.log('Fin');

academianumen.com
 console.log('Codigo Asincrono');
Modelo Asincrono console.log('Inicio');

function dos() {
En la diapositiva anterior vimos cómo
setTimeout(function () {
funcionaba el LIFO en un modelo console.log('Dos');
síncrono. }, 1000)
}
Ahora nos toca ver como funciona en
un modelo asíncrono. function uno() {
setTimeout(function () {

Vamos a ello!! console.log('Uno');

}, 0)
dos();
console.log('Tres');
}

uno();
console.log('Fin')

academianumen.com
 Callbacks
Una función de tipo Callback nos permite function saludarUsuario(usuario) {
pasar otra función como argumento e return `Hola ${usuario}!`
invocarla a través de esta cuantas veces }
se requiera.
function despedirUsuario(usuario) {
En esta ocasión podemos observar como return `Adiós ${usuario}!`
las funciones saludarUsuario() y }
despedirUsuario() se pasan como
parámetro en la función crearSaludo() y function crearSaludo(usuario, callback) {
luego se invocan al llamar a esta última. return callback(usuario)
}

crearSaludo('Numen', saludarUsuario);
crearSaludo('Numen', despedirUsuario);

academianumen.com
 .forEach()
var profesores = ['Cinthia', 'Matias', 'Aaron',
forEach un método que nos 'Santi']
permite iterar arreglos, elemento
por elemento, a través de una // sin callback
ejecución repetitiva de funciones.
for (var i = 0; i < profesores.length; i++) {
console.log(profesores[i])
}

var profesores = ['Cinthia', 'Matias', 'Aaron', Aquí se puede observar como se

'Santi'] ha reemplazado la iteración, a
través de un ciclo for, de un
// con callback arreglo por una función forEach.

profesores.forEach(function(elemento, indice) {
console.log(elemento)
})
academianumen.com
 Otras funciones callback...

academianumen.com
 .map() var profesores = [
{
profesores.map(elemento => {
console.log(`
nombre: 'Matias', <h2>Bienvenidos a Academia
El método map() nos edad: '33', Numen</h2>
permite iterar los profesion: 'Profesor',
},
elementos de un arreglo, <p>En esta ocasión quiero
{
transformarlos y devolver nombre: 'Cinthia',
presentarles
a ${elemento.nombre} quien
un nuevo arreglo con las edad: '31',
será su ${elemento.profesion}
transformaciones profesion: 'Coordinadora',
a lo largo de este curso.</p>
realizadas. },
`)
{
})
nombre: 'Aaron',
edad: '23',
profesion: 'Profesor',
},
{
nombre: 'Guillermo',
edad: '25',
profesion: 'Tutor',
}
academianumen.com ]
 .reduce()
var numeros = [1, 2, 3, 4, 5, 6, 7];
El método reduce() nos permite
recorrer un arreglo y nos
// sin callbacks
devuelve un único elemento.

Ejemplo: Sumar todos los var suma = 0;

elemento (numericos) de un for (var i = 0; i < numeros.length; i++) {

arreglo y devolvernos el suma = suma + numeros[i];
resultado de esa suma. }

// callbacks

var sumaReduce = numeros.reduce(function(acumulador,

elemento) {
return acumulador + elemento;
}, 0);

academianumen.com
 .filter()

Como indica su nombre, el var palabras = ['chancleta', 'pato', 'bigote',

método filter() se utiliza para 'ornitorrinco', 'termo', 'ajedrez'];
filtrar contenido de un
arreglo, es decir, extraer solo var resultado = palabras.filter(palabra => palabra.length
ciertos elementos que > 6);
coincidan con la condición
especificada. console.log(resultado);

academianumen.com
 Closures

Las closures nos permiten function saludar( saludo ){

acceder a variables que no estén return function( nombre ){
exactamente definidas dentro del console.log(`${saludo} ${nombre}`);
scope de una función. }
}
Es decir, van a estar en otro
contexto que ya no existirá más var saludoHola = saludar('Hola'); // Esto devuelve
pero que Javascript nos reserva
una función
esa referencia para poder acceder
a ella de todos modos.
saludarHola('Numen'); // 'Hola Numen'

academianumen.com
 Closures
function hacerSaludo( lenguaje ) {
if ( lenguaje === 'en' ) {
return function () {
console.log('Hi!')
}
}

if (lenguaje === 'es') {

return function () {
console.log('Hola!')
}
}
}

let saludoIngles = hacerSaludo('en');

let saludoEspaniol = hacerSaludo('es');

academianumen.com