JavaScript Memory Management

In any program, a variable takes up some memory. In low-level programming languages such as C, the programmer must allocate and deallocate memory manually. In contrast, the V8 JavaScript engine and other modern JavaScript engines have garbage collectors that delete unused variables for the programmer. Despite this memory management done by the JavaScript engine, however, there are common pitfalls that developers can fall into. This chapter will show some basic examples of these pitfalls and present techniques to help the garbage collector minimize the key JavaScript memory problems.

Memory Leaks

A memory leak is a failure in a program to release discarded memory, causing impaired performance and sometimes even failure. Memory leaks can happen when JavaScript engines’ garbage collectors do not free memory properly.

Follow the key principles outlined in this chapter to avoid memory leaks during JavaScript development.

Reference to an Object

If there is a reference to an object, it is in memory. In this example, say that the memory() function returns some array with 5KB of data.

1 var foo = {

2 bar1: memory(), // 5kb

3 bar2: memory() // 5kb

4 }

6 function clickEvent(){

7 alert(foo.bar1[0]);

8 }

You might expect the clickEvent() function to use 5KB of memory since it is only referencing bar1 from the foo object. However, the truth is that it is using 10KB of memory since it has to load the whole foo object into the function’s into scope to access the bar1 property.

Leaking DOM

If a variable pointing to a DOM element is declared outside of an event callback, then it is in memory and leaks DOM if the element is deleted.

In this example, there are two DOM elements selected by document.getElementByID.

1 <div id="one">One</div>

2 <div id="two">Two</div>

The following JavaScript code demonstrates the DOM memory leak. When one is clicked, it removes two. When one is clicked again, it still tries to reference the removed two.

1 var one = document.getElementById("one");

2 var two = document.getElementById("two");

3 one.addEventListener('click', function(){

4 two.remove();

5 console.log(two); // will print the html even after deletion

6 });

The event listener on the one element will cause the two to disappear from the web page when clicked. However, even if the DOM is deleted in the HTML, reference to it will remain if used in an event callback. When the two element is no longer in use, this is a memory leak and should be avoided.

This can easily be fixed so that it won’t cause a memory leak, as shown here:

1 var one = document.getElementById("one");

3 one.addEventListener('click', function(){

4 var two = document.getElementById("two");

5 two.remove();

6 });

Another way to address this is by unregistering the click handler once it has been used, as shown here:

1 var one = document.getElementById("one");

2 function callBackExample() {

3 var two = document.getElementById("two");

4 two.remove();

5 one.removeEventListener("click",callBackExample);

6 }

7 one.addEventListener("click",callBackExample);

8 });

Global window Object

If an object is on the global window object, it is in memory. The window object is a global object in a browser and comes with various built-in methods such as alert() and setTimeout(). Any additional objects declared as a property of window will not be cleared because window is a required object for the browser to run. Remember that any global variable declared will be set as a property of the window object.

In this example, there are two global variables declared.

1 var a = "apples"; //global with var

2 b = "oranges"; //global without var

4 console.log(window.a); // prints "apples"

5 console.log(window.b); // prints "oranges"

It is good to avoid global variables whenever possible. This will help save memory.

Limiting Object References

An object is cleared when all references are cleared. Always remember to limit the amount of scope the function pulls and pass the property of an object only into functions instead of the entire object. This is because the object’s memory footprint can be very large (e.g., an array of 100,000 integers for data visualization project); if only one of the object’s properties is needed, you should avoid using the entire object as a parameter.

For example, do not do this:

1 var test = {

2 prop1: 'test'

3 }

5 function printProp1(test){

6 console.log(test.prop1);

7 }

9 printProp1(test); //'test'

Instead, pass the property like this:

1 var test = {

2 prop1: 'test'

3 }

5 function printProp1(prop1){

6 console.log(prop1);

7 }

9 printProp1(test.prop1); //'test'

The delete Operator

Always remember that the delete operator can be used to delete an unwanted object property (though it does not work on nonobjects).

1 var test = {

2 prop1: 'test'

3 }

4 console.log(test.prop1); // 'test'

5 delete test.prop1;

6 console.log(test.prop1); // _undefined_

Summary

Although memory in JavaScript is not allocated by the programmer, there are still numerous ways to mitigate memory leaks where applicable. If the object is in reference, it is in memory. Similarly, HTML DOM elements should not be referenced once deleted. Finally, only reference objects in a function that are needed. In many cases, it is more applicable to pass in a property of the object rather than the object itself. Also, be extremely mindful when declaring a global variable.

Exercises

In this chapter, exercises are about identifying memory inefficiencies and optimizing a given piece of code.

ANALYZING AND OPTIMIZING A PROPERTY CALL

Analyze and optimize the call for printProperty.

1 function someLargeArray() {

2 return new Array(1000000);

3 }

4 var exampleObject = {

5 'prop1': someLargeArray(),

6 'prop2': someLargeArray()

7 }

8 function printProperty(obj){

9 console.log(obj['prop1']);

10 }

11 printProperty(exampleObject);

Problem: An excessive amount of memory is used in printProperty because the entire object is brought into the printProperty function. To fix this, only the property being printed should be brought in as a parameter of the function.

Answer:

1 function someLargeArray() {

2 return new Array(1000000);

3 }

4 var exampleObject = {

5 'prop1': someLargeArray(),

6 'prop2': someLargeArray()

7 }

8 function printProperty(prop){

9 console.log(prop);

10 }

11 printProperty(exampleObject['prop1']);

ANALYZING AND OPTIMIZING SCOPE

Analyze and optimize the global scope for the following code block:

1 var RED = 0,

2 GREEN = 1,

3 BLUE = 2;

5 function redGreenBlueCount(arr) {

6 var counter = new Array(3) .fill(0);

7 for (var i=0; i < arr.length; i++) {

8 var curr = arr[i];

9 if (curr == RED) {

10 counter[RED]++;

11 } else if (curr == GREEN) {

12 counter[GREEN]++;

13 } else if (curr == BLUE) {

14 counter[BLUE]++;

15 }

16 }

17 return counter;

18 }

19 redGreenBlueCount([0,1,1,1,2,2,2]); // [1, 3, 3]

Problem: Global variables are used where not necessary. Albeit small, the global variables RED, GREEN, and BLUE bloat the global scope and should be moved inside the redGreenBlueCount function.

Answer:

1 function redGreenBlueCount(arr) {

2 var RED = 0,

3 GREEN = 1,

4 BLUE = 2,

5 counter = new Array(3) .fill(0);

6 for (var i=0; i < arr.length; i++) {

7 var curr = arr[i];

8 if (curr == RED) {

9 counter[RED]++;

10 } else if (curr == GREEN) {

11 counter[GREEN]++;

12 } else if (curr == BLUE) {

13 counter[BLUE]++;

14 }

15 }

16 return counter;

17 }

18 redGreenBlueCount([0,1,1,1,2,2,2]); // [1, 3, 3]

ANALALYZING AND REPAIRING MEMORY ISSUES

Analyze and fix memory issues for the following code.

HTML:

<button id="one">Button 1</button>

<button id="two">Button 2</button>

JavaScript:

1 var one = document.querySelector("#one");

2 var two = document.querySelector("#two");

3 function callBackExample () {

4 one.removeEventListener("",callBackExample);

5 }

6 one.addEventListener('hover', function(){

7 two.remove();

8 console.log(two); // will print the html even after deletion

9 });

10 two.addEventListener('hover', function(){

11 one.remove();

12 console.log(one); // will print the html even after deletion

13 });

Problem: This is the “leaking DOM” issue discussed earlier in the chapter. When elements are removed, they are still referenced by the callback function. To address this, put the one and two variables into a callback’s scope and remove the event listener after.

Answer:

HTML:

<button id="one"> Button 1 </button>

<button id="two"> Button 2 </button>

JavaScript:

1 var one = document.querySelector("#one");

2 var two = document.querySelector("#two");

3 function callbackOne() {

4 var two = document.querySelector("#two");

5 if (!two)

6 return;

7 two.remove();

8 one.removeEventListener("hover", callbackOne);

9 }

11 function callbackTwo() {

12 var one = document.querySelector("#one");

13 if (!one)

14 return;

15 one.remove();

16 two.removeEventListener("hover", callbackTwo);

17 }

18 one.addEventListener("click", callbackOne);

19 two.addEventListener("click", callbackTwo);

7. JavaScript Memory Management

Memory Leaks

Reference to an Object

Leaking DOM

Global window Object

Limiting Object References

The delete Operator

Summary

Exercises

ANALYZING AND OPTIMIZING A PROPERTY CALL

ANALYZING AND OPTIMIZING SCOPE

ANALALYZING AND REPAIRING MEMORY ISSUES