Day 6:Understanding Stack and Heap in JavaScript

In JavaScript, understanding how memory is managed is crucial for optimizing your code and avoiding unexpected behavior. Today, we'll dive into how JavaScript uses the Stack and Heap to manage memory, along with examples to illustrate these concepts.

What Are Stack and Heap?

• Stack:
  
  The Stack is used for static memory allocation, primarily for storing primitive types and function calls. It's a simple, last-in, first-out (LIFO) structure, making it very fast to access.

• Heap:
  
  The Heap is used for dynamic memory allocation, where objects and arrays (non-primitive types) are stored. Unlike the Stack, the Heap is more complex and slower to access, as it allows for flexible memory allocation.

Example of Stack Memory

Let's consider an example using primitive data types, which are stored in the Stack.

let myYoutubeName = "ayushyadavz"; // Primitive type stored in the Stack.
let anotherName = myYoutubeName;   // A copy of the value is created in the Stack.
anotherName = "amanyadavz";        // Changing the copy does not affect the original.

console.log(myYoutubeName); // Output: ayushyadavz (Original value remains unchanged)
console.log(anotherName);   // Output: amanyadavz (Only the copy value is changed)

In this example:

• myYoutubeName is stored in the Stack as a primitive type.
• When anotherName is assigned the value of myYoutubeName, a copy of that value is created in the Stack.
• Changing anotherName doesn't affect myYoutubeName, since they are independent copies in memory.

Example of Heap Memory

Now, let's look at how non-primitive data types (objects) are managed in the Heap.

let userOne = {         // The reference to this object is stored in the Stack.
    email: "[e-mail]",
    upi: "user@ybl"
};                      // The actual object data is stored in the Heap.

let userTwo = userOne;  // userTwo references the same object in the Heap.

userTwo.email = "[e-mail]"; // Modifying userTwo also affects userOne.

console.log(userOne.email); // Output: [e-mail]
console.log(userTwo.email); // Output: [e-mail]

In this example:

• userOne holds a reference to an object stored in the Heap.
• userTwo is assigned the same reference, meaning both userOne and userTwo point to the same object in the Heap.
• Changing userTwo.email directly affects userOne.email, because both references point to the same location in memory.

Key Takeaways

• Stack Memory is used for storing primitive types and function calls. Each time you assign a value, a new copy is created in the Stack.
• Heap Memory is used for storing objects and arrays. Variables that reference the same object share the same location in memory, so changes to one variable affect the others.

Understanding the distinction between Stack and Heap memory helps you manage variables and objects more effectively, leading to more efficient and bug-free code.

Happy coding and see you in the next one!!!