Event Loop, Execution Stack, Web APIs, and Message Queue

1. Overview

Clarify the difference between synchronous and asynchronous in JavaScript. And see How these things to work deeply with Event Loop, Execution Stack, WEB APIs, and Message Queue.

2. Description

2.1 Synchronous

• One statement is processed after the other, line by line in a single thread in the JavaScript engine

2.2 Asynchronous

• Allow asynchronous functions to run in the background
• We pass in callbacks that run once the function has finished its work
• Move on immediately: Non-blocking

3. Event Loop

 const second = () => {
 	setTimeout(() => {
 	console.log('Async Hey there');
 	}, 2000);
 }

const first = () => {
	console.log('Hey there');
	second();
	console.log('The end');
}

3.1 console.log('Hey there');

The console.log function is called and a new execution context is created and the text is logged to the console. Then the function returns and the execution context pops off the stack.

3.2 second()

Moving on the second() function and a new execution context is created. And in the next line, the set timeout function, which is part of something called the Web APIs actually live outside the JavaScript engine itself, is called which causes yes another execution context to be created.

NOTE: Stuff like DOM manipulation methods, setTimeout, HTTP requests for AJAX, Geolocation, local storage and tons of other things actually live outside of the JavaScript engine.

We just have access to them because they are also in a JavaScript runtime. This is exactly the timer that will keep running for 2 seconds asynchronously. So that our code keeps running without being blocked.

When we call the setTimeout(), the timer is created with our callback function. And there it keeps sitting until it finished its work all in an asynchronous way. The callback function is not called right now, but instead, it stays attached to the timer until it finishes. 

 

And since the timer keeps working basically in the background, we don't have to wait and can keep executing our code. Next up, the setTimeout() returns, pops off the stack and so does the execution context of the second function and we are back to the initial first function.

 

3.3 console.log('The end');

Now we just log the end to the console and we give ourselves a new execution context. print the text to the console and pop the text off again.

Next, the function returns and so we're back to our original state.

Right now we have executed all our code in a synchronous way and have the timer run asynchronously in the background. Let's suppose that our two seconds have passed and the timer disappears. Then callback function moves to the Message Queue where it waits to be executed as soon as the execution stack is empty.

3.4 Event Loop

The job of the event loop is to constantly monitor the Message Queue and the Execution Stack and to push the first callback function inline onto the Execution Stack as soon as the stack is empty.

Inside the callback function, we simply run the log function which logs Async "Hey There!" to the console. Then the context pops off the stack and we're done.

4. Reference

https://codingheroes.io/