Picture of the authorDevGrads

Memory management

JavaScript manages its memory using two main areas: the call stack and the heap. Each has a specific purpose:

The call stack

  • Function Calls and Execution Context: The call stack is a LIFO (Last In, First Out) data structure. It keeps track of function calls and their execution context. As a function is called, a new frame is pushed onto the stack. This frame holds information about the function's arguments, local variables, and the place to return to when the function finishes. Once the function finishes executing, its frame is popped off the stack
  • Fast and Fixed Size:The call stack is typically faster to access than the heap because it's a fixed-size structure pre-allocated in memory. This size is determined by the JavaScript engine and available memory.
  • Stores Primitive Values: The call stack primarily stores primitive data types like numbers, strings, booleans, null, and undefined. It also stores references (memory addresses) to objects and functions located in the heap.

    • The heap

  • Dynamic Data Storage: The heap is a more flexible memory space that grows dynamically as needed during program execution. It's used to store objects and functions themselves, not just references to them. Objects and functions can be complex data structures with various properties and methods.
  • Slower Access: Accessing data in the heap is generally slower than the call stack due to its dynamic allocation and potential for fragmentation.
  • Garbage Collection: The heap doesn't have a fixed size, but memory is not infinite. JavaScript uses a garbage collector to automatically clean up unused objects in the heap. This process identifies objects that are no longer referenced by any variables and reclaims their memory.
    • Picture of the author

  • Call Stack: Imagine a stack of plates. Each plate represents a function call. You add a plate (push a frame) when you call a function, and you remove a plate (pop a frame) when the function finishes.
  • Heap: Think of the heap as a larger storage area behind the counter. This is where you store the actual food (objects and functions) you'll be using on the plates (function calls).