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

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

Working:

  • 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.
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