SpiderJS

1. Introduction to Call Stack and Memory Heap After exploring the JavaScript runtime environment and V8 engine’s journey to machine code, we now look at the data structures managing code execution: the Call Stack and Memory Heap. They’re key to understanding how JavaScript handles function calls and memory. What is the Call Stack? The Call Stack tracks function execution in JavaScript using a Last In, First Out (LIFO) structure. When a function is called, a stack frame is created with details like local variables and return address. Primitives (e.g., numbers, strings) are stored directly in the stack frame, while references to non-primitives (e.g., objects) point to the Memory Heap. Once the function finishes, its frame is removed, and execution returns to the previous function. What is the Memory Heap? The Memory Heap stores dynamically allocated data, primarily non-primitives like objects and arrays, during runtime. It’s less structured than the Call Stack, allowing flexible allocation. Primitives are typically stored in the Call Stack, but non-primitives reside in the Heap, with references held in the stack frames. V8’s garbage collector manages the Heap to free unused objects. 2. Journey of Code Through Call Stack and Memory Heap Let’s explore how JavaScript code interacts with the Call Stack and Memory Heap during two key phases: allocation and execution. Journey of Code: Allocation and Execution Allocation: When JavaScript code runs, the V8 engine allocates memory. Primitives (e.g., numbers) are stored in the Call Stack’s stack frames, while non-primitives (e.g., objects) are allocated in the Memory Heap, with references stored in the stack frames. Function definitions are prepared but not executed yet. Execution: The Call Stack manages function execution. When a function is called, it’s pushed onto the stack. The engine executes the function, accessing primitives directly from the stack and non-primitives via Heap references. Once the function finishes, it’s popped off, returning control to the previous function. Example function greet() { let message = "Hello!"; // Primitive: stored in Call Stack return message; } function start() { let result = greet(); // Primitive: stored in Call Stack let obj = { text: result }; // Non-primitive: stored in Heap, reference in Call Stack console.log(obj.text); } start(); Allocation: message and result (strings) are allocated in the Call Stack’s frames. obj (an object) is allocated in the Heap, with its reference in the start() frame. Execution: start() is pushed to the Call Stack, then calls greet(), which is pushed on top. greet() returns "Hello!" and is popped off. start() creates obj, logs its text property (accessed via the Heap reference), and is popped off, emptying the stack. 3. Stack Overflow, Garbage Collection, and Memory Leaks Now let’s look at common issues with the Call Stack and Memory Heap, including stack overflow, garbage collection, and memory leaks. Stack Overflow Scenarios A stack overflow happens when the Call Stack exceeds its size limit, often due to infinite recursion. For example, a function calling itself without a stopping condition keeps adding stack frames until the stack overflows, causing a crash. Garbage Collection in the Heap Garbage collection is V8’s process to manage the Memory Heap. It identifies objects no longer referenced by the code and frees their memory, keeping the Heap from growing too large. V8 uses a generational approach, splitting objects into “young” and “old” spaces for efficient cleanup. What is a Memory Leak? A memory leak occurs when memory in the Heap is allocated but not freed, often because of lingering references that prevent garbage collection. This causes memory usage to grow over time, slowing the app or causing crashes. Example function recursive() { recursive(); // Infinite recursion causes stack overflow } recursive(); let leakyArray = []; function leak() { leakyArray.push(new Array(1000)); // Keeps adding, causing a memory leak } setInterval(leak, 1000); // Runs repeatedly Stack Overflow: recursive() causes a stack overflow by endlessly adding stack frames. Memory Leak: leakyArray grows indefinitely, as its reference prevents garbage collection. Resources MDN: JavaScript Call Stack. MDN: Memory Management. GeeksforGeeks: How V8 Compiles JavaScript.

function greet() {
  let message = "Hello!"; // Primitive: stored in Call Stack
  return message;
}
function start() {
  let result = greet(); // Primitive: stored in Call Stack
  let obj = { text: result }; // Non-primitive: stored in Heap, reference in Call Stack
  console.log(obj.text);
}
start();

function recursive() {
  recursive(); // Infinite recursion causes stack overflow
}
recursive();

let leakyArray = [];
function leak() {
  leakyArray.push(new Array(1000)); // Keeps adding, causing a memory leak
}
setInterval(leak, 1000); // Runs repeatedly

Related Posts

Smarter insights, stronger teams: New features for Stac...

Apr 26, 2025  0

How I Built My First Employee Management System in Reac...

Apr 26, 2025  0

Exploring Cisco's Innovations: Open Source Networking a...

May 1, 2025  0