¡¡ENTENDIENDOLO TODO!! Asincronismo y callbacks

¡Hola Platzinautas! 😄

Si tu cerebro también sangró un poco al tratar de entender el Asincronismo y la funcionalidad de los callbacks, este tutorial está hecho para ti !
Te prometo que después de esto entenderás por completo todos estos conceptos, y estarás más que listo para entender los reguests y las promesas, así que sin más previa vamos a ello!

1. EL TIEMPO EN JAVASCRIPT
   JavaScript es un lenguaje single threaded, esto quiere decir que sólo pude hacer
   una cosa a la vez.

function hacerPrimeraCosa(){
  var numero1 = 5
  console.log(numero1)
}
hacerUnaCosa()

Perfecto !, ahora entendamos que cuando se invoca una función, esta se agrega al (stack of frames) o (call stack) o Pila de Tareas
así que por el momento sólo hay una tarea / frame / call en pila / stack.
¿Saben qué? para no complicarnos con tanto nombre que son la misma cosa, entendamos
Pila de Tareas y Tareas

Ahora si Compliquemos esto !
haciendo que nuestra Función hacerPrimeraCosa ejecuté o llame a una segunda función, a la que llamaremos porsupuesto, hacerSegundaCosa

function hacerSegundaCosa(){
	var numero2 = 3*2
	return numero2
}
function hacerPrimeraCosa(){
	var numero1 = 5
  var numero2 = hacerSegundaCosa()
 return numer1 + numero2
****

¿QUÉ HA pasado aquí ?
Pues que hacerPrimeraCosa ha invocado a HacerSegundaCosa, y al hacer esto hacerSegundaCosa se ha colocado por encima de HacerPrimeraCosa en la Pila de Tareas, esto con el fin de que el resultado de la multiplicación este listo para que se ejecute la suma final.
Cuando HacerSegundaCosa termina su ejecución, desaparece de la Pila de Tareas, dejando el camino libre a hacerPrimeraCosa

Cambios en la Pila de tareas…

2. LA COLA DE TAREAS (callback queue)
Lo primero que tenemos que entender sobre esto es que la Cola de tareas es algo completamente distinto a la Pila de la tareas.

La cola de tareas, cómo su nombre lo indica, organiza los llamados a funciones por el orden de llegada, NUNCA pondrá una función por encima de otra.

• Enivar una función a la Cola de tareas :
  recurramos a la vieja confiable de “Hola mundo”, sólo que esta vez es “Hola” será una función normal dentro de la Pila de tareas y el “mundo” será la función que enviaremos a la Cola de tareas

function saludarParte1 (){
console.log('Hola')
}
function saludarParte2 (){
console.log('Mundo !')
}

setTimeout( saludarParte2 , 2000 )

saludarParte1()

setTimeout() : es un método del navegador que nos permite enviar una función a la Cola de Tareas, acepta dos parametros.
el primero: es la función que enviaremos a la cola
el segundo: es el tiempo en milisegundos que tiene que esperar esa función para ser agregada a la cola

PERO PERO PERO !…si JavaScript es un lenguaje single threaded

¿Cómo puede existir una cuenta atrás de 2 segundos que se este ejecutando al mismo tiempo que se imprime nuestro hola ?
Pues resulta que esto es posible gracias a las WEB APIs que proveen al runtime de JavaScipt de hilos adicionales de ejecución. Por eso dije que setTimeout() es un metodo del navegador. algo aparte de Javascript, una ayudita.

Event Loop
por fin estamos listos para entender el funcionamiento del Event Loop. Entendamolo como un Agente de transito el cual regula que funciones son ejecutadas y cuando.
El Event Loop tiene la capacidad de saber cuando nuestra Pila de tareas se encuentra vacía, en ese momento y SÓLO en ese momento, comenzará a ejecutar las funciones que estén en la Cola de tareas.

Para ejemplificar esto digamos que dentro de nuestro “Hola mundo” habrá una función intrusa que será agregada a la Pila de tareas con una invocación de la misma en la primera parte de nuestro saludo.
Más código y menos habladuría!

function intrusa(){
console.log('PATATA !!!')
}
function saludarParte1(){
intrusa()
console.log('Hola')

}
function saludarParte2(){
console.log('Mundo !')
}
setTimeout(saludarParte2, 0)
saludarParte1()

¿QUÉ HA pasado aquí ?

• SaludarParte2() se agrega a la Cola de tareas y aunque tenga un delay de 0, el Event Loop no la ejecutará hasta que la Pila de la tareas este vacía.

• Luego SaludarParte1() se agrega a la Pila de Tareas, pero antes de que pueda hacer algo agrega la función intrusa() hasta arriba en la pila.

• Intrusa() se ejecuta y desaparece de la Pila, dejando a SaludarParte1 con el camino libre.

• SaludarParte1() se ejecuta, dejando la Pila de tareas vacía, para por fin permitir la ejecución de la Cola de tareas, o sea … SaludarParte2()

• SaludarParte2() pasa a la Pila de tareas, ejecutandoce y terminando el hilo logico de nuestro script.

Explicación gráfica

Si llegaste hasta aquí y lo entendiste todo, me sentiré más que contento de haberte ayudado 😄