Revelations: How JavaScript Works Behind The Scenes — part 02
A few weeks ago we started an article series in order to dig deeper into important concepts in JavaScript as well as to get a clear understanding of how JavaScript works behind the scenes.
In the first article of this series, we discussed how JavaScript converts into Machine code and all the steps involved in the process. The second article of the series will be explaining how JavaScript runtime and JavaScript Engine works in order to execute the JavaScript code.
JavaScipt Runtime Environment
JS runtime is used to host the JavaScript and this is where the code execution happens. JS Runtime Environment can consider as a container that includes all the necessary components to run JavaScript code. This is the reason behind the asynchronous behavior of the JavaScript language. There are several forms in JavaScript runtime. Such as Runtime in the Browser and Runtime in the Node.js
In the context of a browser, runtime contains JavaScript Engine, Web API, Callback Queue, Job Queue, and Event Loop. All these components together add more power to the JavaScript language such as making HTTP requests asynchronously and adding event listeners.
Each component is responsible for certain tasks which together execute the JavaScript code. Throughout this series, we will be diving deeper into how each component works.
Now let’s take a closer look at Js Engine and how it works.
JavaScript Engine
JS engine is an interpreter or a program that executes JavaScript code. Every browser has its own inbuilt JavaScript engine. However, google chrome’s V8 engine is the most popular JS engine and it has also been used in the Node.js runtime. There are other well-known JS engines such as spiderMonkey which powers Firefox and Rhino managed by the Mozilla foundation.
JS engine contains a call stack and a heap. Call Stack is where our code is executed using execution context. A heap is an unstructured memory pool. As I explained in the previous article, modern JS engines use the Just-In-Time compilation method to convert the JS code into machine code.
Call Stack and Execution Context
Every JavaScript engine has a single call stack which makes JavaScript a single-threaded programming language. This is the reason for the synchronous behavior of JavaScript. As there is a single call stack it can do one thing at a time.
Call Stack is a data structure that follows the first in last out principle. This is used to manage execution contexts. Execution Contexts get stacked on top of each other to keep track of where we are in the code execution. In a call stack top most execution context is the one currently running. Once it's done the execution will be removed from the call stack. This method is helpful to maintain the order of the code execution.
The next question we have is what exactly is the execution context?
Execution context is the environment that a piece of JS code is executed. Execution Context stores all the necessary information which will need for a certain code to get executed.
After the compilation process once the code is ready to be executed global execution context will create for the top-level code.(top-level code is the code outside functions, which includes variables declared outside a function..etc ). In every JS project, there is only one global execution context. Every function in the code will get its own Function Execution Contexts as well.
There are several components contained in the execution context
- Variable environment (this contains let, const, var declarations, functions, and argument object)
- Scope chain
- This keyword
The above example explains how global and function execution context will be like for the given code.
**It is important to note that the execution context of arrow functions does not get their own this keyword and argument object.
Stack Overflow
Every call stack has a fixed size depending on the host environment once the maximum call size is exceeded it will throw an error and this is known as stack overflow. This can happen when there is a function that calls itself which is also known as a recursive function.
This article is an explanation of how JavaScript runtime and JS engine works. In the next article, I’ll be explaining other components in the JS runtime and also about the memory heap.
You can read the first article of the series here :
Revelations: How JavaScript Works Behind The Scenes
At Apium Innovations we build world class software products for startups and scaleups while following the best practices in JavaScript, follow us to learn more.
