2.Trays and a Warehouse

The Problem in Real Life

One Pile of Memory vs. Two Very Different Areas

The Stack and the Heap

• The stack — a pile of trays in a cafeteria: each time a function is called, a fresh tray is put on top of the pile. On that tray go the function's local variables (Act 07) and a note saying where to go back to when it's done. When the function finishes, its tray is taken off the top and everything on it is gone — instantly and automatically. The stack is small, very fast and perfectly tidy. It's the same last-in, first-out idea as the stack of plates in Act 09.
• The call stack — the trays in action: when holdSeat calls checkSeat, a tray for checkSeat goes on top of the tray for holdSeat. When checkSeat returns, its tray comes off, and holdSeat continues where it left off. The pile of trays at any moment is called the call stack, and each tray is a stack frame. When an error happens, the "stack trace" you see (Act 17) is simply a list of the trays that were on the pile at that moment. And if functions keep calling functions forever, like recursion without a base case in Act 09, the pile reaches the ceiling: stack overflow.
• The heap — a big warehouse: some data has to outlive the function that created it, or is too big or too unpredictable for a tray: a list of seats, an object describing a hold, a timer. That goes into the heap — a large, flexible storage area. Things in the heap stay there until they're cleaned up (next chapter). The heap is bigger and more flexible than the stack, but a little slower, and it doesn't clean itself up when a function ends.
• How the two work together: when holdSeat creates a hold object, the object itself goes into the heap warehouse. The local variable on the stack tray holds only a reference to it — a note saying "the hold is on shelf 4,021." When the function ends, the tray and its note are gone. Whether the hold object in the warehouse can also be thrown away depends on one thing: does anything else still have a note pointing to shelf 4,021?

const timers = new Map();          // created once at startup — lives in the heap all day

function holdSeat(seatId, fanId) {
  const now = Date.now();           // stack: local value, gone when the function ends
  const hold = {                    // heap: a new object
    seatId,
    fanId,
    heldUntil: now + HOLD_DURATION_MS,
  };
  const timer = setTimeout(() => releaseSeat(seatId), HOLD_DURATION_MS);   // heap: a timer
  timers.set(seatId, timer);        // the long-lived map now references the timer
  return hold;
}