JS Runtime Environment and Event Loop

What is runtime environment?

Each browser has its own version of a JS engine. Chrome uses what it calls its V8 JS Engine

AJAX, the DOM tree, and other API’s, are not part of Javascript, they are just objects with properties and methods, provided by the browser and made available in the browser’s JS Runtime Environment.

How does V8 Engine work?

First, it will partially parse the code checking for syntax errors. If it finds none, it starts reading the code from top to bottom. Its ultimate goal is to turn the javascript code into machine code that the computer can understand.

Memory Heap:
As the V8 JS Engine comes across variables and function declarations in the code, it stores them here.

Stack:
As the JS Engine comes across an actionable item, like a function call, it adds it to the Stack.

Web API Container:
The Web API calls that were sent to the Web API container from the Stack, like event listeners, HTTP/AJAX requests, or timing functions, sit there until an action is triggered. Either a ‘click’ happens, or the HTTP request finishes getting its data from its source, or a timer reaches its set time. In each instance, once an action is triggered, a ‘callback function’ is sent to the fourth and final container, the ‘callback queue.’

Callback Queue:
The Callback Queue will store all the callback functions in the order in which they were added. It will ‘wait’ until the Stack is completely empty.

The Event Loop:
constantly look at the Stack and the Queue. If it sees the Stack is empty, it will notify the Queue to send over its next callback function.

The Queue and the Stack might be empty for a period of time, but the event loop never stops checking both. At any time a callback function can be added to the Queue after an action is triggered from the Web API container.

This is what they mean when they say Javascript can run asynchronously. It isn’t actually true, it just seems true. Javascript can only ever execute one function at a time, whatever is at top of the stack, it is a synchronous language. But because the Web API container can forever add callbacks to the queue, and the queue can forever add those callbacks to the stack, we think of javascript as being asynchronous.

Blocking vs Non-Blocking I/O

Blocking I/O: think of an infinite loop, where a function just keeps running. If the function never stops running then it will never get popped off the stack, thus ‘blocking’ the next function in the stack from ever running.

On HTTP-request case: One thing that can be a ‘blocking I/O’ is an HTTP request. Say you make a request to some external site data and you have to wait for that site’s network. The network may never respond and your code will ultimately be stuck.

While Javascript handles this in the runtime environment. It sends the HTTP request to the Web API and pops it off the stack so that the next function can run while the Web API waits for its data to return. If the HTTP request never gets its data back the rest of the program will continue running. This is what we mean when we say JS is a Non-Blocking language. work as a Callback Function.

setTimeout(function(){
  console.log('Hey, why am I last?');
}, 0);
function sayHi(){
  console.log('Hello');
}
function sayBye(){
  console.log('Goodbye');
}
sayHi();
sayBye();

• The JS Engine parses the entire script checking for syntax errors.
• It sees a setTimeout function call and pushes it to the top of the Stack.
• It jumps right into the function call, sees it is part of the Web API and thus sends it over to the Web API container and pops it off the Stack.
• Because the timer is set to 0 seconds, the Web API container immediately pushes its anonymous function to the callback queue. The event loop checks the Stack to see if it’s empty
• as soon as the setTimeout function was sent over to the Web API container, the V8 JS Engine saw two function declarations, stored them in the Heap, and then saw a function call of sayHi() and pushed it to the Stack.
• sayHi() function calls console.log(), which is pushed to the top of the stack.
• ……..
• The Event Loop sees that the Stack is finally empty. It lets the Queue know and the Queue pushes its anonymous function to the Stack.
• The anonymous function is parsed and it calls console.log(), which is pushed on the stack.
• …..

Browser Environment vs Node.js Environment

Node.js provides a completely different runtime environment, though it is also powered by Google Chrome’s V8 JS Engine. This means Node.js will not provide for you the DOM tree, AJAX, or other Web API’s.