"Inside JavaScript: Exploring the Call Stack and Memory Heap"

Overview

As a Javascript developer, you might have heard of "Call Stack" & "Memory Heap" in the context of your code's execution. In this article , we will explore what call stack and memory heap are , how they interact and why they matter in the world of JavaScript.

The JavaScript Engine does a lot of work for us and one of its very important job is to read the code and execute it . We need a place to store and write our data , this is what "Memory Heap" will do for us and where we are in the code and which line of code we have to execute is where call stack comes in to the picture.

Call Stack

Call Stack keeps track of where we are in the code . The call stack is a fundamental part of the JavaScript runtime that manages function calls. It's essentially a stack data structure (last in, first out) that keeps track of the function calls currently being executed.

How the Call Stack Works ?

1. Function Calls: Whenever a function is called, a new entry (known as a "frame") is added to the call stack. This entry contains information about the function, such as its name and parameters.Each call stack can point to a location inside the memory heap.
2. Execution: The function at the top of the stack is executed. If this function calls another function, a new frame for the called function is added to the stack.
3. Completion: When a function completes its execution, its frame is removed from the stack, and control returns to the calling function.

function greet() {
  console.log('Hello');
}


function sayMyName() {
  greet();
  console.log('My name is Mohit ');
}

sayMyName();

In the above code , we can see that we are calling sayMyName() function. When the function is called ,

• then some memory will be reserved for it in the memory heap.
• sayMyName() function's frame is added to the call stack
• inside sayMyName, greet() function is called, so one more frame is added to the top of the call stack for it.
• After greet function completes, its frame is removed, and the stack returns to sayMyName. Finally, when sayMyName completes, its frame is removed, and the stack becomes empty.

Stack Overflow:

It's very essential for us to manage call stack , as call stack has limited size and exceeding this memory results in stack overflow.

So in simple words , if you keep calling functions that are nested inside each other, and does not have proper conditions then it will lead to stack overflow.

function add() {
add()
}

add();
// Maximum call stack size exceeded

In the above code we are recursively calling a function again and again , at some point of time , no memory will be left and it will give error "Maximum call stack size exceeded" this is what we mean by "Stack Overflow".

Memory Heap

The memory heap is where JavaScript stores objects, variables, and function closures. It's a large, unstructured region of memory used for dynamic memory allocation.

y. It is a place to allocate, use, and remove memory as needed. 

How the Memory Heap Works ?

When you create variables or objects in JavaScript, they are stored in the memory heap. Unlike the call stack, which has a limited size, the memory heap can grow as needed.

Memory management in the heap is done automatically by the JavaScript engine. When an object or variable is no longer needed, it's automatically marked as "garbage" and becomes eligible for garbage collection, which reclaims memory resources. Whenever we will allocate memory inside a function , then JavaScript will automatically remove it from the memory heap as soon as the function completes its execution.

Memory Leaks

Memory leaks occur when you unintentionally hold references to objects that you no longer need, preventing them from being garbage collected. This can lead to increased memory consumption and reduced performance. To avoid memory leaks, be mindful of object references and clean up resources when they are no longer needed.

Example of memory leak:

In the below example , a memory leak is created. By changing the variable person from an object to a string, it leaves the values of "firstName" and "lastName" in the memory heap and does not remove it. This can be avoided by trying to keep variables out of the global namespace, only instantiate variables inside of functions when possible.

It's better to use functional / variable scope , global scope should not be used much as it may lead to potential bugs and memory.

var person = { firstName: "Mohit", lastName: "Sood" }; 
person = "Mohit Sood";

The Interaction Between the Call Stack and Memory Heap

The call stack and memory heap work together to execute JavaScript code:

1. Function Execution: When a function is called, its code is executed, and variables, objects, and closures are created in the memory heap as needed.
2. Call Stack Management: The call stack keeps track of the function calls, including their order and parameters.
3. Variable Access: When a function accesses variables or objects, it retrieves them from the memory heap.
4. Function Completion: When a function completes its execution, its frame is removed from the call stack, and any variables or objects it created in the memory heap become eligible for garbage collection.

Understanding this interaction is crucial for optimizing memory usage and preventing issues like stack overflow errors and memory leaks.

Conclusion

The call stack and memory heap are essential components of the JavaScript runtime environment, responsible for managing function calls and memory allocation, respectively. While they work together seamlessly, it's important to be aware of their roles and limitations to write efficient and bug-free JavaScript code. By understanding both you will be able to write more maintainable and bug free code

Happy Coding !!