How memory is stored in Stack and Heap. The in-depth discussion to tackle all Questions on Stack and Heap memory!

Why is Stack memory faster? Variable of Heap memory stored in Stack? Pass by reference occurs in Heap Memory or Stack Memory? What causes Memory Leak?

Q1. All the Variables are stored in which memory, Stack or Heap?

Answer: Stack. Yes all the variables are stored in stack.
But there is a catch - All the variables are stored in stack but the data what the variables carry or refers to doesn’t necessarily is stored in Stack! All the Primitive datatypes variables are stored in stack and their data is also stored in stack where as for all the non-Primitive data types, variables are stored in stack but the data is stored in Heap and the variable just points to the address of that data where in the Heap is stored!!!!!!
Dang was it overwhelming?? Lets understand via a example!!

Example:

We have 2 primitive datatypes: firstName and lastName and one non-primitive datatype(Object) person1.

const firstName = "Ram"
const lastName  = firstName;

let person1 = {
  firstName: "Ram",
  age: 23,
  lastName: "Bhardwaj"
};

With a diagram lets understand how and where these data in the variables are stored!

Lets note what we observed:

For all primitive datatypes: The variables are stored in Stack memory and the data is also stored in Stack memory.

For all non-primitive datatypes: The variables are stored in Stack memory but the variables just points to the address of the data, which is stored in the heap memory! So in non-primitive datatypes the variables are stored in Stack memory and the data is stored in heap memory!

Here's a table summarizing how primitive and non-primitive data types are stored in memory:

Data TypeVariable Stored InData Stored In
Primitive Data TypesStack MemoryStack Memory
(e.g., number, string, boolean, null, undefined, symbol, bigint)
Non-Primitive Data TypesStack MemoryHeap Memory (Referenced by stack)
(e.g., object, array, function)✅ (Stores reference)

Q2 Why is Stack Memory Faster?

Lets understand this by a diagram

For Getting the data from Stack Memory:

For Getting the data from Heap Memory

As you can see that Stack have to take less steps then heap for retrieving the data, hence Stack is faster.


Q3. What is the concept of pass by reference in Heap memory?

To understand this lets create a new object person2 and copy the value of person1 to person2, and then change the value of person2 and note the changes!

const firstName = "Ram"
const lastName  = firstName;

let person1 = {
  firstName: "Ram",
  age: 23,
  lastName: "Bhardwaj"
};
let person2 = person1;
person2.firstName= "Tamanna"
console.log(person2.firstName);
console.log(person1.firstName);

Diagram representing how the values are changing in the heap memory if one object is changed

In the diagram notice that person2=person1 results in assigning the same address of person1 to person2 and hence changes in the address value in heap will result in changing the values of both variable.

And my friend this was the concept of Pass by reference in Heaps.


Q4. What is Memory leak?

When a variable is removed from stack memory, it does not always clear the data it was referencing in heap memory. As a result, the data may remain in the heap, leading to a memory leak.

Expecting a diagram for the explanation?
I would urge you to take a pen and paper and make the diagram yourself for this example, this would help you really understand what you learnt in this blog!!

Thanks for visiting!