JavaScript Concept : Memory Allocation(Stack and Heap) and Behavior

Good day everyone! Today we will discuss a JavaScript Concept Memory Allocation and Behavior. This concept is crucial to understand deeply on how JavaScript works. Learn alongside me and Enjoy reading!

Goals and Objectives for this Topic:

• Understand how memory allocation and behavior function in:
  • Primitive types
  • Reference types

In JavaScript engines, there are indeed two primary memory spaces used for data allocation: Stack and Heap

Primitive Types

• Storage: Primitive types are stored in Stack Memory . The stack is generally used for static memory allocation, which includes fixed-size variables.

• Value-based: When you assign or pass a primitive type, it is done by value. This means that the actual value is copied.

Example:

let a = 10;

let b = a; // Copies the value of a into a new memory spot for b

b += 5;    // Changes in b do not affect a

console.log(a); // 10

console.log(b); // 15

Reference types

• Storage: Reference types are stored in Heap Memory. The heap is used for dynamic memory allocation, where the size of the structure can change over time.

• Reference-based: When you assign or pass reference types, it is done by reference. This means that instead of copying the actual data, a reference (or a pointer) to the object in memory is copied.

Example:

let obj1 = { value: 10 }; 

let obj2 = obj1; // Copies the reference, not the actual object

obj2.value = 15; // Changes the value via obj2 also affect obj1 

console.log(obj1.value); // 15 

console.log(obj2.value); // 15

How JavaScript Manages Memory

JavaScript automatically manages memory with a garbage collector, freeing developers from manually deallocating memory. The garbage collector periodically frees memory used by data that is no longer accessible.

1. Stack

• The stack is a Last-In-First-Out (LIFO) data structure used for storing:
  • Local variables declared within the function.
  • Arguments passed to the function.
  • The return address (where to return after the function finishes execution).
• It's fast and has a fixed size, pre-allocated by the OS. Once a function completes, its data is automatically removed, freeing space for new calls.

  2. Heap

• The heap is an unstructured, flexible memory area for dynamic allocation. It's slower than the stack but stores:
  • Global variables
  • Objects and arrays
  • Dynamically allocated data
• Garbage collection automatically reclaims unused memory, preventing leaks.

Summary of the key difference:

Understanding the roles of the stack and heap is crucial for writing efficient JavaScript code. You should strive to minimize the use of global variables and large data structures within functions to optimize memory usage and avoid stack overflows. Thanks for reading ❤️❤️❤️!