1) Memory Life Cycle
Whatever you are or what it is, everything always follows the life process: birth, growth, sickness, and death, so JS memory does. The “memory life cycle” is crucial to understanding how a programming language’s engine runs underhood and to avoid leaking memory.
- Allocate: JS allocates the memory that needed for the objects we create.
- Use: it is simply reading or writing to memory (nothing more).
- Release: after an object is unusable or a function exits/returns… JS will release their space, so the memory can be used for a new purpose.
2) Memory heap and stack
Everything, we define in JavaScript, the engine allocates memory and frees it up once we don’t need it anymore.
- Where is “everything” going to be stored?
- Heap & Stack!!!
a) Stack
Stack: is a data structure JS uses to store the “static data”, such as the primitive types or references.
Static data: is data where the engine knows the size at compile time.
Since the JavaScript engine knows how big the data is and the size won’t be changed, it will allocate a fixed amount of memory. This process of allocating memory right before execution is known as static memory allocation. However, the limit to how large primitive values can be depends on the browser.
b) Heap
Heap is where JS stores object and functions when we define a new one.
Unlike Stack, the JS engine does not allocate a fixed amount of memory for these objects, more space will be allocated as needed later at the runtime.
c) Stack vs Heap
Note: as I mentioned above, Stack stores the references also.
So, what are references in JS? Basically, whenever we define a new object or function, we think that the defined variable contains the value of that object or function too, right?
Actually, it doesn’t because the variable is just assigned to the address of the object/function, which we call reference that refers to the real object/function in Heap.
3) Garbage collection
We discussed how the JS engine allocates and uses memory. How about releasing the memory after everything has been done?
This is where we do need to have another engine for releasing memory, which is called Garbage Collection.
Like the engine’s name, it collects all unusable data. However, we do need to incorporate many algorithms to handle this job because it’s impossible to know exactly when a variable or object is not needed anymore.
a) Reference - counting
It simply collects the object that have no references.
However, it still has a critical problem in the case below.
After we set “null” to both objects son and dad, they do not have references anymore. BUT, we can’t access them and the reference-counting algorithm did not recognize that.
b) Mark-and-sweep
The algorithm detects whether the objects are reachable from the root object(window in the browser and global in NodeJS). It marks the objects are not reachable as garbage and sweeps (collects) them afterward (root object can not be collected).
4) Memory leaks
- Global variables: if you use “var“, “function” or you just leave out the keyword altogether, the JS engine will attach those variables to the root object (window object) by default.
What does that mean? It means those variables are reachable in the sight of the mark-and-sweep algorithm, and they won’t be collected even no need anymore.
- Forgotten settimer and callbacks: forget to clear timeOutId after the task has been finished.
- Out of DOM reference: adding them to another place, but deleting them in the original stack.