Memory Management in Javascript

#javascript #webdev #programming #performance

Javascript is a high level language that has GC (garbage collections) being done by the modern browsers (Javascript engines). This gives Javascript developers an impression that neither they need to know what is happening behind the scene, nor doing something to improve the memory management of their Javascript app. One of the reasons that lower level languages such as C language are faster and more efficient is because we can control the GC manually, therefore they are more optimised and efficient in memory management.

There are three main parts of Javascript memory management consists of:

1) When we assign a value to a variable, it will automatically allocate an available memory piece to store the value and with reference linked to this variable.

2) This variable is then used in the script.

3) When variable is not in used anymore (or the reference was removed), the memory in heaps will automatically be freed to prevent memory leaks.

Javascript is using Mark and Sweep algorithm for memory management as the points above. Basically, it will mark those memory reference that are in used by the script, and sweep the rest off.

var apple = {
  color: 'red',
  category: 'fruits'
}

var apple = {
  color: 'red',
  category: 'fruits'
}

apple = 10

There might be cases where garbage collection is not able to free up those unused memory and causes memory leaks. We as a Javascript developer, could do something to try preventing them. Three of the most commonly seen causes of memory leaks are:

1) Event Listeners
Event listeners will automatically be removed when the DOM element is detached from the DOM tree and with no more reference to it in Javascript. However, older browser such as IE will not be able to handle this properly. Besides, we should also plan the usage of our event listeners carefully because they are not in used most of the time until events are triggered, and they take up memory when those DOM elements are active.

2) Global Variables
There is always a Global Object in Javascript, for example the 'window' object in browser and the 'global' object in Node.js. We should try to avoid using global variables as they will always exist when the global execution context is still in the stacks. This global execution context is created before any code is executed and therefore these global variables will always be attached and not being garbage collected. Again, planning is important. Try to use local variables defined with 'let' and 'const' (not 'var', if we declare with 'var', it will be part of the Global Object) within the blocked scope, for example in functions. The local variables in functions are automatically cleared off when the function call is popped off from the stack.

3) Things that continuously running in the background
We should also be careful when we use functions such as setInterval(). When we use a variable in the callback function, this variable will always be attached and not getting cleared off.

Conclusion: Planning before executing, even the logic of assigning variables. This will help improving the performance of your app especially when it scales up.

Do follow me for more future articles on web design, programming and self-improvement 😊

Follow me on Medium