How JavaScript Works Under the Hood, Explained for Dummies

You might know how JavaScript works as you write it every day but have you ever wondered how the browser reads your written code and what does really happen under the hood, you write code in your text editor but how it will turn to zeros and ones. There are some topics in JavaScript that if you get familiar with as a developer may help you in writing better code.

JavaScript Engine does a lot of work but the biggest thing is reading our code and executing it, for that purpose we need a place to store and write data and a place to run and keep track of what is happening line by line.

Memory management is one of the things that JavaScript handles itself no need for you to allocate memory for functions and variables. The same applies to knowing how heap, stack, and call stack work. However, knowing about them and how they work can help you understand how JavaScript works and it results in writing better code.

Call stack

JavaScript is a single-threaded programming language which means it can do only one thing at a time and has only one call stack that follows First in Last out (FILO) which means the first one comes in the last one getting popped out and it is a mechanism that helps JavaScript interpreter to keep track of the functions that a script calls and its code execution is synchronous.

Memory heap

It is a space or a region where JavaScript stores variables, objects, and functions, and it is known at run time. We should notice that JavaScript store object and functions in heap and variables are stored in the stack.

Stack Overflow

It is a situation in which a function calls itself recursively and the browser will have a maximum call stack without an exit point, in most cases, it occurs because of recursion.

Garbage collection

JavaScript is garbage collected language which means getting back and freeing up memory from the objects that have already been declared but are not currently in use in any part of our application.

Most high-level languages have their own garbage collectors compared to the low-level languages that implement garbage collection through libraries. Garbage collection provides us with a few security concerns as we don’t need to worry about memory management.

In low-level languages, you control parts of memory which is dangerous in some ways but it can be optimized that’s why a language like C is extremely fast and memory efficient. Garbage collection in JavaScript is controlled through an algorithm called Mark and Sweep in which all the objects without reference get deleted from memory.

1. Mark: This marks objects that still have references.

2. Sweep: This scan all objects in memory and removes all the ones that are not marked.

Memory leaks

When systems cannot manage their memory allocation it is said to be a memory leak and it is treated as a bug that results in reduced performance and failure, and somehow it is a memory that is not returned to the operating system or the pool of free memory. The main cause for memory leaks in garbage-collected languages is unwanted references. The most common types of memory leaks can be divided into:

1. Global variables: JavaScript global variables are not garbage collected since they are referenced by the root node and it results to occupy the application as long as it runs.

2. Event listeners: event listeners can cause memory leaks when heavy object references are kept in their callbacks without proper handling and it occurs more in single-page applications.

3. setIntervals: every time you call a function which setInterval can be executed s in a dedicated amount of time, a new stack frame is being added to the heap and because of setIntervals keep running unless you stop, it can result in memory leaks.

JavaScript runtime

As we have already mentioned JavaScript is a single-threaded language and it has only stack and heap hence if another program wants to execute it has to wait until the previous program is done with its execution which results in slow working and this is where JavaScript runtime comes in. web browsers working in the background while synchronous JavaScript code is running and web browsers use something called web APIs to communicate with JS engine.

Browsers use low-level languages like C/C++ to perform the operations in the background and these APIs are called web APIs. they are what we called asynchronous which means we can instruct them to do something in the background and return data when done.

Call back queue

It is a FIFO data structure that your asynchronous code gets pushed to and waits for the execution.

Event loop

It is running continuously that looks at the call stack and call back queue, if the call stack is empty it pushes the first callback function of the call back queue to the call stack.