Event Loop y el Asincronismo de JavaScript
- Blog
- JavaScript
Muchas personas aún confunden Java y JavaScript (JS). Si, ambos son lenguajes de programación, pero hay algo que diferencia a JS de otros lenguajes: Su ciclo de eventos (Event Loop en inglés). JS tiene un modelo de interacción impulsado por eventos que lo diferencia del clásico Solicitud-Respuesta que encontramos en otros lenguajes como Python, Ruby, y claro, Java.
Non Blocking
En JavaScript casi todas las operaciones de I/O (Entrada y Salida) no se bloquean. A esto se le conoce como asíncronismo. Lo único que no es procesado antes de que termine la operación son los callbacks, ya que éstos éstan amarrados a una operación y esperan a que sea finalizada para poder ejecutarse.
Para que puedan entender mejor. Vamos a poner un ejemplo de la vida real:
Imagina que te levantas una mañana a preparar tu desayuno. Primero decides tostar tu pan y luego prepararás tu avena. Si fuera una persona síncrona (Blocking) tendrías que esperar a tostar tu pan para recíen preparar tu avena. Pero si fuera una persona asíncrona (Non Blocking) luego de poner a tostar tu pan, vas preparando tu avena. La acción de que salga tu pan de la tostadora sería un callback que está esperando que finalice el proceso para ejecutarse. Pero otros procesos (como preparar tu avena) ya podrían irse realizando.
Event Loop
Para que funcione todo eso del Non-Blocking, JavaScript almacena los callbacks en una lista de mensajes a procesar. Y se encarga de pasar uno de los callbacks (el del proceso que ya finalizó) al call stack. El Call Stack (FILO: First In Last Out) es la función que se está ejecutando actualmente.
Vamos a poner un ejemplo real de cómo funciona el Asincronismo:
En este pequeño ejemplo tenemos cuatro impresiones en la consola. En un lenguaje común la conversación sería:
- - Hola
- - Como estas
- - Muy Bien
- - Chau
Pero como estamos hablando de JavaScript. El resultado sería diferente.
Para ver el ejemplo dale click al botón ejecutar que está en la parte superior derecha y revisa la consola.
En primera instancia se ejecuta la función console.log
Luego, viene la función setTimeout que sirve para ejecutar un callback después de un tiempo asignado.
En este caso, el CALLBACK se va a la cola de mensajes hasta esperar que se cumpla el tiempo indicado. Entonces JS lo que hace es seguir con el siguiente proceso. Y como nuevamente es console.log, JS lanza el mensaje.
Al final hay otro setTimeout con un tiempo más corto que el primero. El CALLBACK se va a la cola al igual que el primero, pero al ser el tiempo más corto, éste será lanzado al call stack antes que el primer CALLBACK.
El resultado sería:
- - Hola
- - Muy Bien
- - Chau
- - Como estas
Bueno, espero se hayan hecho una idea de cómo trabaja JavaScript y así puedan manejar mucho mejor el tema del asincronismo que muchas veces nos cuesta trabajo entender.