JavaScript and Event loop

JavaScript is gaining popularity on all stacks whether it is front end or back end development in-spite of single-threaded in nature. Being a hardcore C++ developer, I understand what is a multi-threaded application and how it works, but JavaScript is single-threaded. How people are writing applications with a single-threaded language.

Single-threaded means one task at one time, how JavaScript is handling multiple tasks in parallel (multiple ajax request and reading a file from filesystem along with the other computations).

When I asked this query to nodeJs developers, I got the standard answer that though Js is single-threaded but it has event-loop that takes care of parallel tasks.
Again, I could not understand the statement at all, I decided to search over the internet and found interesting facts.

Yes, It is an event-loop that does the magic. Let us understand how.
First, understand the call stack for the case below:

    function foo() {
        console.log("I am foo");
    }

    function bar() {
        foo();
        console.log("I am bar");
    }

    function square() {
        bar();
        console.log("I am square");
    }

    square();

All the functions are stored in a stack memory and it's data stored in heap memory. This is the case of blocking functions and it is straight forward to understand.

The output will be like:

I am foo
I am bar
I am square

Let us change the function foo() like below

function foo() {
    setTimeout(() => {
        console.log("I am foo");
    }, 5000);
}

function bar() {
    foo();
    console.log("I am bar");
}

function square() {
    bar();
    console.log("I am square");
}

square();

Output:

I am bar
I am square
I am foo

I am foo will be printed after 5 seconds.

setTimeout() does not belong to core javascript, it is part of the browser's Web API module that can have n numbers of threads/processes to do the things in parallel.

foo gives the setTimeout responsibility to the Web API module. Web API module waits for 5 seconds and after 5 seconds it places the setTimeout callback function into a queue called callback queue.
Whenever the current Js function's call stack is empty, it picks the available callback from the callback queue and executes it. If the current function's call stack is not empty, none of the callbacks picked from the callback queue. This is the reason setTimeout's time parameter is the minimum wait time, not the exact time.

Ajax calls works in the same way. Ajax call request is forwarded to the Web API module and on success or failure, the Web API module places the success/failure callback with the data into the event queue.

After that whenever the current Js functions' stack becomes empty, callback entry from the callback queue is taken out and processed.

In the case of NodeJs, C++ modules take place of Web API and perform the File I/O, ajax and similar operations in parallel and whenever the result is ready pushed into the callback queue.

Hopefully, I am able to explain the event-loop magic.

JavaScript and Event loop

JavaScript and Event loop

Share this

1 comments :