What the heck is the event loop anyway ???

JavaScript programmers like to use words like, “event-loop”, “non-blocking”, “callback”, “asynchronous”, “single-threaded” and “concurrency” ????

What the heck I am talking about ???

How to simplify ???

Let’s talk about all of them in detail.

Let’s get started guys cheers :)

Javascript is single threaded language or single threaded run-time that means it has a single call stack.

what it means is that it can do one thing at a time that’s what a single thread means like a program can run one piece of code at a time okay let’s try to visualize it.

Let’s start with the call Stack.

Let’s execute this code step by step.

Let’s talk about call stack which is bascially a Data Structures that records where in the program we are.

Ok I guess you lost it ? Let’s explain it again.

That is what we call as a rough visualization of call stack.

Let’s talk about Blocking

what happens when things getting started to get slow ???

So , In a programming language which is single threaded for instance — ruby.

that’s what happens when we make a network request when have to wait until is done because we have no way of handling that so what I mean by that is that making a network request to third party applications bascially blocks the call stack and we can’t do anything until we are done with network request.

so what’s the solution ???

ya, you guessed it right asynchronous callbacks !!!

So in the above-mentioned code snippet “Hey” is logged first and then we have setTimeout which is Queued for future and then

“kinda Non — Blocking !” is logged and in the end (5 seconds later) we log “are you alive !”

Concurrency & the event Loop

JS runtime can only do one thing at a time the reason why we can’t do things concurrently is that browser is more than runtime.

So setTimeout is the api is provided to us by the browser it doesn’t live in the V8 source it’s the extra stuff that we get in the enviroment we are running javascript runtime in.

So web api can’t just start modifying our code it can’t put itself in the call stack when it is ready because if it does so it would randomly appear in the middle of our code so this is where callback Queue or task Queue comes in.

So basically web api when it’s done pushes the callback in the task Queue and finally we get to the event loop.

Event loop job is to look at the task Queue and to look at the stack if the stack is empty it takes the first thing on the Queue and pushes it to the stack which effectively runs it and Here we can see stack is empty and there is a callback in the task Queus so the event loop runs and it pushes callback in the stack.

And now CB appears in the stack that is javascript land and logs out “are you alive !”.

So all these web Api works in the same way for instance if we have AJAX request.

we make an AJAX request to the URL with an callback first “hi” will be logged the code for running the AJAX request does not live in js runtime but it lives in the browser as an Web Api so we spin it to the web Api stack with a callback in the URL your code will continue to run until the AJAX request completes and when it completes callback gets pushed into Task Queue and finaaly when the Stack is empty it is picked up by the event Loop.

That’s what happens when an Async call happens.

Let’s call it end of the blog I will add more content in future.

Thanks for your time and reading the blog.

Related posts:

Em 2015 participei com alguns amigos da faculdade de uma palestra sobre como a sua melhor versão pode lhe levar além. Como já era esperado pelo título, em algum momento a palestrante falou sobre como…

As someone who loves food and is an active member of a local United Church, I wanted to gather people together to explore what our Christian faith teaches us about the food we eat. I had read an…