How JavaScript Works: An Overview of JavaScript Engine,Memory life cycle, Heap, and Call Stack

⚙️ Memory life cycle

Let’s start with the easiest part. What is a memory life cycle, what it is about and how it works in JavaScript? Memory life cycle refers to how a programming language works with memory. Regardless of the language, memory life cycle is almost always the same. It is composed of three steps.

The first step is memory allocation. When you assign a variable or create a function or object some amount of memory has to be allocated for it. The second step is memory use. When you work with data in your code, read or write, you are using memory. Reading from variables or changing values is reading from, and write to, memory. The third step is memory release. When you no longer use some function or object, that memory is can be released. Once it is released it can be used again. This is the memory life cycle in a nutshell. The nice thing on JavaScript is that it makes these three steps for you.

JavaScript allocates memory as you need and want. It makes it easier for you to work with that allocated memory. Lastly, it also does the heaving lifting and cleans up all the mess. It uses garbage collection to continuously check memory and release it when it is no longer in use. The result?

As a JavaScript developer, you don’t have to worry about allocating memory to your variables or functions. You also don’t have to worry about selecting correct memory address before reading from it. And, you don’t have to worry about releasing the memory you used somewhere in the past.

⚙️ JavaScript Engine

The JavaScript engine is a program that executes your JavaScript code. A popular example of a JavaScript engine is Google's V8 engine.

⚙️ V8 Engine

The V8 engine is an open-source, high-performance JavaScript and Web Assembly engine written in C++. The V8 engine is used inside Google Chrome, Node.js, and electron, among others.

The V8 engine has two main components:

Heap is an unstructured memory that is used for memory allocation of the variables and the objects. The place where JavaScript can store data is memory heap. This storage is more dynamic. When it comes to memory heap, JavaScript doesn’t allocate fixed amount of memory. Instead, it allocates memory as needed at the moment. This type of memory allocation is called “dynamic memory allocation”.

Which data are stored in memory heap? Memory heap is a place where JavaScript stores objects and functions. Allocated memory for these is not fixed. It is allocated dynamically as necessary.

Call Stack is a LIFO data structure that is used for function calls that record where we are in the program. Since the call stack is single, function(s) execution, is done, one at a time, from top to bottom. It means the call stack is synchronous. Call stack is a mechanism JavaScript uses to keep track of functions. When you call a function JavaScript will add that function to the call stack. If this function calls another function, JavaScript will add that function to the call stack as well, above the first function.

🥞 Call Stack

JavaScript is a single-threaded programming language, which means it can do one thing at a time, and it has one Call Stack.

If you call a function, it's pushed on the top of the Call Stack, and when the function returns, it's popped from the top of the Call Stack.

Let's take an example.

function one() {
  return 1;
}

function two() {
  return one() + 1;
}

function three() {
  return two() + 1;
}

console.log(three());        

Let's take another example that contains an error.

function one() {
  // throws an error
  throw new Error("Oops");
}

function two() {
  return one() + 1;
}

function three() {
  return two() + 1;
}

console.log(three());        

When the V8 engine encounters an error, it prints a stack trace. A stack trace is basically the state of the Call Stack.

Let's take another example that blows up the Call Stack 💥. We can do this by using a recursive function.

function recursion() {
  recursion();
}

console.log(recursion());        

A recursive function calls itself again and again. At some point in time, the number of function calls exceeds the actual size of the stack, and the browser detects this to take action by throwing an error.

I hope now you have a fair understanding of how JavaScript works.