# Object-oriented JavaScript and Google Maps objects memory management

I have to draw various instances of HeatMaps, Winds and Polylines. Each layer will have one HeatMap, 1000+ Wind arrows and 3000+ Polylines.

The websocket pushes the data into the mapData structure where the data is stored for later manipulation of objects.

Each layer takes around 400MB of memory. Since I have to draw multiple layers of the object, I need to delete and release the memory of each object created.

Here's my deleting function, deleteMapLayer():

this.mapData.deleteMapLayer = function deleteMapLayer() {

for (var index in self.mapData.wind.data) {
self.mapData.wind.data[index].setMap(null);
}

self.mapData.wind.data = null;
delete self.mapData.wind.data;

self.mapData.wind = null;
delete self.mapData.wind;

self.mapData.alarm.heatMapInstance.setMap(null);

self.mapData.alarm.data = null;
delete self.mapData.alarm.data;

self.mapData.alarm = null;
delete self.mapData.alarm;

for (var index in self.mapData.gasConcentration.data) {
self.mapData.gasConcentration.data[index]
.setMap(null);
}

self.mapData.gasConcentration.data = null;
delete self.mapData.gasConcentration.data;

self.mapData.gasConcentration = null;
delete self.mapData.gasConcentration;

};

• Please provide a more specific title. This one doesn't really specify anything about the code itself. – Jamal Jun 21 '15 at 3:24
• Is this describing a weather map overlaid onto a Google map image? The description (heat maps, wind arrows, and polylines) sure sounds like it. – 23fc9a62-56de-47fb-97b4-737890 Jun 21 '15 at 5:12
• yes kind of gas concentartion on the Map – nitansh bareja Jun 22 '15 at 4:35

# Theory

Fist of all check this article about memory management, it will help to find leaks if any.

Look closer at this part

Limitation: cycles

There is a limitation when it comes to cycles. In the following example two objects are created and reference one another – thus creating a cycle. They will not get out of the function scope after the function call, so they are effectively useless and could be free'd. However, the reference-counting algorithm considers that since each of both object is referenced at least once and none can be garbage-collected.

Also

Mark-and-sweep algorithm

This algorithm reduces the definition of "an object is not needed anymore" to "an object is unreachable".

This algorithm assumes the knowledge of a set of objects called roots (In JavaScript, the root is the global object). Periodically, the garbage-collector will start from these roots, find all objects that are referenced from these roots, then all objects referenced from these, etc. Starting from the roots, the garbage collector will thus find all reachable objects and collect all non-reachable objects.

This algorithm is better than the previous one since "an object has zero reference" leads to this object being unreachable. The opposite is not true as we have seen with cycles.

Second quote sad that it is enough to be unreachable from so called roots objects to be collected with garbage collection.

So if you follow all recommendation and memory still leaks, than there is one of problems:

• library you are using not release objects
• garbage collector has not started (I mean it has some timeout when to collect objects)

# Garbage timeout

Look at dummy example of garbage timeout at fiddle. I'm creating array of 30M elements of int, that are binded to root object - window.

window.data = [];
for (var i = 0; i < 30*1000*1000; i++)
window.data.push(i);


Then on click, i'm releasing this object

function onDelete(event) { window.data = null; }


But, memory get free only after 3 minutes in my Google Chrome 43.0.2357.125 (64-bit). I was looking in htop, so chrome could free objects instantly, but return to system only after 3 minutes.

# Profiling

If everything looks impossible, you can always try experimental way, using profiling. There is awesome article about profiling in Google Chrome also Firefox Developer Tools.

I have applied chrome heap profiles for my example, and it says that data object doesn't exist in window scope any more after pressing "delete" button.

Hopes it will help.

• If you assign more memory after deleting the reference, your memory will free up much sooner. – ps95 Jun 21 '15 at 5:48

First off, without the background code for this, it's a little hard to understand what exactly this code is doing, but I'll try to give as good a review as possible.

1. First off, the code inside deleteMapLayer should be indented for readability.
2. Secondly, don't create a function as an instance attribute using this.f = function() { ... }, but rather, do Object.prototype.myfunction = function() { ... }.
3. Why are you setting all the attributes of self.mapData to null and then deleteing them? It'd be much more simple just to do self.mapData = null; delete self.mapData;.
4. Finally, according to this MDN page, the delete operator has nothing to do with freeing memory.

Unlike what common belief suggests, the delete operator has nothing to do with directly freeing memory (it only does indirectly via breaking references.

• The delete operator removes properties from an object which can lead to memory being freed if nothing else has a reference to what was in that property. It doesn't directly free memory, but it releases a reference to whatever was in the property which can lead to it getting freed by the garbage collector. – jfriend00 Jun 21 '15 at 4:27
• Exactly, use delete to break cycles at best. You will NOT get an OutOfMemory error ever if the collector can find collectable objects, even if you're using a lot of memory. You just need to make sure that no objects that you don't need are somehow reachable. – ps95 Jun 21 '15 at 5:51