In this article, we are going to learn about how JavaScript programs are executed behind the scenes. This is a very important concept that every modern JavaScript developer should be aware of.

Let's start this section by understanding what a JavaScript runtime is. A JavaScript runtime is an environment that provides all the necessary components to use and run a JavaScript program. These runtime environments can be slightly different when we use JavaScript in a browser and when we use it as a server-side language with Node.js. However, the basic structure of a runtime environment always remains the same.

Now, a JavaScript runtime consists of several components. In the case of a browser, a JavaScript runtime consists of a JavaScript engine, web APIs, a callback queue, and a microtask queue. The heart of any JavaScript runtime is always a JavaScript engine, which executes JavaScript code. Each browser has its own JavaScript engine, such as Google Chrome's V8 engine. The JavaScript engine is supported by web APIs that provide extra functionality to the JavaScript language. These web APIs are not part of the JavaScript language itself but can be accessed through the global window object. Additionally, a typical JavaScript runtime includes a callback queue and a microtask queue. The callback queue contains callback functions ready to be executed, and the microtask queue stores callback functions with higher priority than those in the callback queue. These queues ensure that callback functions are executed when the call stack is empty.

It's important to note that JavaScript can also exist outside of the browser, as in the case of Node.js. In Node.js, the JavaScript runtime includes C++ bindings and a thread pool. This overview provides a high-level understanding of what a JavaScript runtime is and how it looks in the browser.

Please refer below video for more explanation.