Memory management in JavaScript – Detailed And Crisp

Javascript is a high-level language that relies on current browsers to perform garbage collection. This gives Javascript developers the notion that they don’t need to know what’s going on behind the scenes or do anything to improve their Javascript app’s memory management. Languages like C/C++ which are closer to the low-level languages are faster and more efficient. This is because they allow full control of memory management, making them more memory-optimized and efficient.

Javascript Memory Management

The following are the three main components of memory management:

1) When we assign a value to a variable, it allocates an accessible memory portion as well as a reference to the variable.
2) The script then uses this variable.
3) When this variable is no longer in use (or a reference is removed), the heap memory is immediately released to avoid memory leaks.

Javascript manages memory using the Mark and Sweep technique. In a nutshell, it flags every memory reference that the script uses and removes the rest. Refer the example below.

var apple = {

color: ‘red’,

category: ‘fruits’

}

var apple = {

 color: ‘red’,

category: ‘fruits’

}

apple = 10

It is possible that garbage collection won’t be able to clear up the unneeded memory, resulting in memory leaks. However, the following are some ways to help minimize it further. Following are the three typical sources of memory leaks:

1) Event
When a DOM element is detached from the DOM tree and no longer referenced in Javascript, any event listener associated with this DOM element is immediately removed as well. However, older browsers, such as Internet Explorer, won’t be able to handle this adequately. Furthermore, we should carefully consider how we use our event listeners because they are rarely used until events are triggered, and they consume much memory when the related DOM components are active.

2) Global Variables
There is a global object called the ‘window’ object in the browser and a corresponding ‘global’ object in Node.js. We should strive to avoid utilizing global variables because they will always be present as long as the global execution context (GEC) is still present in the call stack. This GEC is generated before any code is run and so the global variables will always be active till the call stack is filled. Further, even in the local variables, try declaring them using ‘let’ or ‘const‘ rather than ‘var’. This is because the ‘var’ declared variables have function scope instead of block scope. The idea here is to decrease the scope of a variable as much as possible. Such that there are minimum variables holding memory at any given instance.

3) Things that are always running in the background
When using functions like setInterval, one should be very cautious. When a variable is used in a callback function, it will never cease to exist.

Everything must be planned before execution, including the logic of assigning variables. This will help the app run better, especially as it scales.

Conclusion

This was all about JavaScript. If you wish to learn more about memory management, check out the articles and courses on Codedamn. I hope you enjoyed it. Please let us know if you have any questions or recommendations in the comments section. If you want to learn JavaScript, Codedamn has courses with an in-browser sandbox where you can learn and practice the language, all inside the browser.
Join the Codedamn community, read other programming and development articles on the site, and subscribe to our newsletter to stay up-to-date on new programs and upgrades. Feel free to post any queries or remarks in the comments section.

Related Blog – Common Errors in Javascript