JavaScript's Event Loop


I have been hearing that JavaScript is a single threaded language but also non blocking as well, without really getting to know what this means actually .
so a brief introduction might be of use as a start : 

First JavaScript runtime :

in general a runtime environment is where our programs will be executed. it determines what global objects programs can access , what built in libraries  are available to a program to interact with the outside world and it can also impacts how it runs.

Two JavaScript runtime environments:
  • the runtime environment of a browser like Chrome.
  • the Node runtime environment
In the case of the browser, this runtime environment consists of the following :
  • The JavaScript engine (composed of the heap and the call stack)
  • Web APIs
  • The callback queue
  • The event loop


The main objective of the JavaScript engine is to translate source code that is written by developers to machine code that allows a computer to perform specific tasks.

please note that Chrome Browser and Node js uses the same JavaScript engine: (V8) but their runtimes are different in Chrome we have the Web APIs which provides  window, DOM objects etc. , while Node provides some core modules like crypto, http, fs, path,...etch which are wrappers  around C/C++ implementations.

Second JavaScript Single Threaded & Synchronous code problems

JavaScript is a single threaded language which means it has only one call stack that is used to execute the program, the call stack as we have known from Data Structure is a FILO (first in last out ).
So when  a code gets inside the call stack , it is executed according to its order and then move out of the stack. Subsequently when we use Synchronous calls we would have to wait till each line of code finishes before we are able to execute the next one, for example in the case of browser while we are executing a synchronous line of code , the browser is totally stuck/blocked until this execution completes.

This gets us to the Asynchronous functions calls like for example setTimeout, so how this works , when for example we pass a delay variable of 8000, then the Web APIs would run a timer for this amount -8000- then once it finishes , the callback function is pushed into the callback queue , finally here comes the role of the event loop , the event loop main task is to monitor the call stack once it is empty which means all the previously invoked lines of code have been popped of the stack , then the event loop would grab the first item from the callback queue and push it to the stack queue.
Same also goes for the Ajax request's callback, and the event listeners.

so in a nutshell: 
Even though JavaScript is single threaded (can only do one thing at a time ), still we can run it asynchronously as we can push callbacks from the Web APIs to the callback queue and then the event loop can add those to the call stack once it is empty.

  When people refer to blocking the event loop , what they mean is having a code that runs for a relatively long time and therefore occupying the call stack , which in turn means that the event loop did not get a chance to clear the callback queue.


Could not recommend enough this amazing talk : 
What the heck is the event loop 

Also some other amazing articles related to the same subject:


 




Comments

Post a Comment

Popular posts from this blog

Head First Architecture

Image
 I have found out that there is a new book that is under early release version on the O'reilly website  called Head First Architecture that is to follow on the great Head First series , as I have read the Head First Design patterns book and really liked it several years ago and the fact that Neal Ford  (One of the authors of Software Architecture An Engineering Approach) is one of the authors, I take a look on it and found that it really is adding a lot of value at least for me, so I am doing a brief summary of it in the next couple of posts hopefully. At first it draws an analogy between building houses and building software systems, in this analogy the building plan or the blueprint of houses is the equivalent of the software architecture, what might be the similar point between both: 1- Both specify the structure of the system, in the house case it defines the rooms, walls, stairs and floors, in the case of the software system it defines the databases, services, user-i...
Read more

Head First Architecture Chapter-3

Image
 This chapter is mainly about the fact that software architecture has a lot of tradeoffs. An Application Scenario: A scenario was given about an application for selling sneakers (this could be anything tbh), that helps people buy, sell, and trade collectible sneakers.  The initial architecture was simple a single service that responds to requests send by mobile app users. So there are 2 options we might get into the tradeoff between them , which are using queues or using topics for messaging : so we can do the tradeoff analysis for each approach of them: 1- Queue approach  Pros:  a- It is more secure as the publishing service is aware of the receivers as each new service would have a new queue and the publishing service would need to know about it to send to it. b- we can have a different format for each receiver. c- we can scale and monitor independently each queue.  2- Queue approach Cons: a- Higher degree of coupling which hurts extensibility. b- Require...
Read more

The Culture Map -Some notes

Image
 I have been reading over the last few days  a book titled the Culture Map, it is extremely amusing and a clear eye opener for me . It is about the different culture contexts and how they can affect us in the work environment , implicitly and unintentionally sometimes. This also does not mean to follow  the different stereotypes as people from same country can different traits for sure, but also the cultural effect can have huge impacts on behaviors for sure. The Book Defines 8 Scales /Measurements that are needed in any business environment and how the cultural differences might affect them. 1- Communication: Low Context vs High Context : There are some cultures that start any communication without suggestion that there is a common context between different parties , that is why they tend to clearly document every step and  leave no space for speculation those are low context style of communication. While there are some other cultures that tend to assume an existing...
Read more