Introduction
JavaScript is a scripting language, therefore it is necessary to “place” it in some container that would enable it to work, that container is called JS Runtime Environment (Serbian environment). There are two types of environments: browser (for working on the client) and node.js (for working on the server). Runtime Environment consists of :
- JS Engine/Runtime
- Heap
- Stack
- External API
- Queue
- Event loop
EXPLANATION:
JavaScript is a “single thread” programming language and cannot itself perform multiple simultaneous parallel actions. However, the execution of several parallel actions (so-called asynchronous execution) is possible with the mutual cooperation of JavaScript and its environment. Read more about this in the article “Principle of work of asynchronous JavaScript”.
JS engine/runtime
JS runtime/engine is an application written in C++ that compiles JavaScript code into machine code. Compiling is done every time the program is started. “just-in-time compilation”. The most famous JS Engine is Google’s “V8” which is found in Chrome but also in Node.js. Other engines are: Mozilla’s “Rhino”, Firefox’s “SpiderMonkey”, Microsoft’s “Chakra”… JS Runtime uses two types of memory: Heap and Stack.
Memory
a) Stack
“Stack” is a linearly structured memory, which is “fast” and serves for temporary storage of data (simple primitives, functions…) during code execution. Data is stored in memory sequentially, so that “newer” data comes over “older” ones. This type of data organization is often compared to a pile of dishes stacked on top of each other. When the need for some data at the top of the stack ends, the garbage collector removes it from the stack. This kind of organization means that the latest data can be accessed at the moment. Which means that some older data cannot be accessed before all newer data is removed.
See animation of callstack operation here (Tip: Click the two crossed hammers icon in the top left corner of the app to change the code execution speed).
Note:
Please note that the stack can receive a certain number of tasks, so if we call too many tasks, the error “Range Error: Maximum CalStack size exceeded” will appear.
b) “Heap”
Heap represents an unstructured type of memory in which dynamic data (objects) are placed and stored. This is a slower type of memory. Unlike a stack that has a limited size,The “heap is limited only by the size of the virtual memory. Data stored on this type of storage have no mutual dependencies and can be accessed in any order at any time. Each data has its own address through which we can find it.
External API
We have already mentioned that JavaScript is a scripting language, and that it is necessary to “place” it in a container that would allow it to work. The term External API usually refers to objects and methods that enable JavaScript to communicate with the outside world. The External API depends on the environment, so the borwser API differs from the NODE.js API. The list of all Web APIs can be viewed on the page https://developer.mozilla.org/en-US/docs/Web/API
Browser API
- Document Object Model (DOM)
connects the web page with the script ie. programming language because working with HTML, SVG, or XML documents as objects is not part of the JavaScript language. You can see a list of all DOM interfaces on the page Web/API/Document_Object_Model.- window object API
- setTimeout()
- setInterval()
- …
- document object API
- event API
- web worker API
- …
- window object API
- navigator object
- XMLHttpRequest object to interact with the server
- animation API
- HTML5 APIs
- video and audio API
- canvas API
- fullscreen API
- geolocation API
- local storage API
-
- pointer lock API
- IndexedDB API
You can see more about the objects that come with the browser in the article Objects embedded in the environment – Browser API
Node.je API
- Process object
- Buffer object
- require()
- setTimeout()
- …
Third party API
In addition to the API of the environment (browser or Node.js), there are also APIs from external resources, the so-called Third party API which are necessary if we want to use their services. The most famous “Third party API” are:
- Google Maps
- PayPal
- …
Queue
This type of memory has a linear structure and the work with data is also sequential as with stack. The data placement is the same as with the stack, but the access to the data is in reverse order from the oldest data to the newest.
This is where a piece of code is placed that is ready to be sent to the JS Engine for execution. This memory is freed sequentially by sending a certain part of the code to be executed by the JS Engine and transferred to the stack. But when it will happen is “decided” by the Event loop (this happens only when the stack between two operations remains empty). Queue is still often called “Event queue” or “Callback queue” depending on what it is loaded with.
Event loop
Event loop is a process that constantly checks whether the stack is empty and whether there are any functions in the queue to be executed. If this happens, the first function in the queue from the queue (“the oldest”) is called and it is moved to the stack.
See an animation of JavaScript in action here, and you can read more about the asynchronous operation of javascript in the article Principle of operation of asynchronous javascript