Memory Management: Heap vs. Stack Memory

If you learned to code with JavaScript or Ruby, like many of my fellow Flatiron graduates might have, you might be unfamiliar with the concept of memory management. After all, higher level languages manage a lot of these details ‘automatically’. I put this in quotes because there are times where this process can run into errors, and knowing about how it works can give you a better insight as to how to solve these potential issues.

In its most basic form, memory management can be represented like this:

Sounds pretty easy, right?

In JavaScript, this is very easy, as you probably have been doing this every single time you write any bit of code. Let’s take a look at a simple example:

We expect to see {first: 1} as output

In line 2, we Allocate Memory. The declaration let x = {}; will result in JavaScript automatically allocating a portion of memory dedicated to our variable x.

In lines 3 and 4, we Use Memory. We access the key first and assign it a value of 1. Then we print the object x to the console.

After our program ends, this is when JavaScript automatically Deallocates Memory. JavaScript, like many other high-level languages, has a process known as Garbage Collection. Essentially, when a variable that was allocated memory goes out of scope or when a program ends, that memory is freed without any additional steps needed to be taken by the developer.

So let’s move onto the blog topic. There are two places in memory where variables in JavaScript, and most other programming languages, are stored. The Run-time Stack (or Stack, for short) and the Heap. Even in languages such as C/C++ where you have to manually deallocate memory, variables that are stored in Stack memory are automatically deallocated.

So what determines which place in memory a variable we declare is stored? In languages such as Java or C/C++, it is pretty easy to differentiate. For Java and C++, any variable declared with a new operator will allocate Heap memory. Any other variables will be stored in Stack memory. In C it’s even more obvious, as we specifically need to invoke the malloc() function to store data on the Heap. With JavaScript and other higher level languages, the difference is a little less apparent since we as developers don’t really see any obvious hints as to which variables are being placed on the Heap or Stack. As a general rule of thumb, primitive types are stored on the Stack, and objects/functions are stored on the Heap. A bit more nuanced of an answer is that when a variable (the reference to it, not just the value of it. See my post about pointers!) persists over multiple function calls, then it is likely allocated space on the Heap.

So How Does This Help Me as a JavaScript Developer?

Even if you never have to worry about manually allocating or deallocating memory, knowing about how JavaScript manages memory under the hood can lead you in the right direction when trying to debug your code.

For example, if you use JavaScript regularly, particularly React, at one point you might have run into an error that looks like this:

Uncaught RangeError: Maximum call stack size exceeded

The call stack is actually our Stack memory! This occurs when something in your code is allocating too much Stack memory, most likely due to some unintentional infinite loop.
I believe if you take just a bit of time learning about some fundamental principles, not only will it help your JavaScript development, but also give you more of a language-agnostic understanding of programming in general!