Advanced JavaScript: Working of JavaScript Engine

It’s been a while since I posted any blog. Mainly due to lack of time from my job. But I’d like to make that up by providing some valuable insight. Today, we’re gonna look behind the scenes of how a JavaScript Engine works. This post assumes basic familiarity of JavaScript, on the reader’s end. Also, familiarity with concepts of asynchronous code execution would be handy. You could take a look at this article for a basic idea on async code. This post is for JavaScript developers, both novice and experienced,who want to understand such advanced concepts of JavaScript.

What is a JavaScript Engine??

A JavaScript Engine is essentially a program which executes JavaScript code. In the early days of JavaScript, it was primarily implemented as an interpreter , but nowadays it is also implemented as Just-In-Time(JIT) compiler which compiles JavaScript to bytecode. All modern browsers, as well as NodeJS(A Javascript Runtime) uses a JavaScript Engine. Google’s V8 Engine is one of the most famous and most used JavaScript Engines in the world. It is used by NodeJS as well as Google Chrome.

Working of JavaScript Engine

To understand working of JavaScript Engine, one needs to be familiar with the components associated with it:

  1. call stack: All operations to be executed in a JS code is pushed, in a sequence, onto the call stack. As each operation(block of code) gets executed, they are popped from the call stack
  2. browser API: Consists of DOM API’s, AJAX API’s and Timeout API’s(like setTimeout()). The relevant browser API is called whenever an async function is invoked from code. The execution of the async code is outsourced to the corresponding browser API.
  3. Message Queue/Event Queue: It is essentially a list onto which async code snippets(callbacks, promises,etc) are registered, by the browser/runtime, as events/messages. These messages/events are pushed onto the call stack once the call stack has time to execute these async code snippets. Message Queue/Event Queue behaves as a todo list for the JavaScript Engine
  4. Event Loop: Monitors the event/message queue for pending events and pushes them on to the call stack when time is allotted by the call stack. Event Loop synchronizes the call stack with the event/message queue.

NOTE: For JavaScript code not executed in the browser, async code snippet is outsourced to the runtime.

  • Whenever an async function is invoked, assuming a callback function is defined which is triggered on async code completion, the corresponding browser API is called and now, the browser/runtime manages that piece of code.So, the async code is popped from the call stack, thus allowing other code snippets to execute without getting blocked.
  • When computation of async code happens, it gets stored in the event queue/message queue.
  • The message queue/event-queue is a medium(acts as a sort of to-do list) where the browser/runtime registers any async code(callback function, promises, etc) to be executed once it has time for it.
  • Once the call stack allows us time, the callback function/promise which was registered in the event/message queue, is pushed into the call stack. This synchronization of the call stack with the event/message queue is done using the Event Loop.
  • The Event Loop monitors the message queue for pending callbacks and pushes it onto the call stack when it has time(or call stack is empty).
  • Once the async code snippets complete their execution, they are popped from the call stack.
Source: https://miro.medium.com/max/985/0*jBHb1fFqLuoDyYCe.png
Source: https://miro.medium.com/max/985/0*jBHb1fFqLuoDyYCe.png

Backend Developer at Tricog Health, Bangalore. https://github.com/Sayan3sarkar