85

I'm working with canvas and its ImageData object which contains a huge amount of data (millions of integers). So working with a few arrays already takes a lot of memory (up to 300MB). Is there a way to free up the memory of some array when it's unnecessary? I'm trying to assign undefined to that variable. Is it right?

10
  • You can't manage memory allocation in Javascript or call the garbage collector. Dec 11, 2011 at 20:51
  • 1
    I believe that's all you can do. The rest is up to the garbage collector. Dec 11, 2011 at 20:51
  • So all that I can do is to use as less arrays as possible?
    – haynar
    Dec 11, 2011 at 20:53
  • 4
    you could assign null instead of undefined Dec 11, 2011 at 20:55
  • 1
    It may be worth noting that since you can pass bounds to getImageData, you don't necessarily have to work on the entire image data array at once. Depending on what you're doing, it may consume less peak memory to work on the image in chunks, so that garbage collection can work between the chunks. Dec 12, 2011 at 1:56

2 Answers 2

139

If the variable persists (e.g. it's global or part of some persistent data structure) and the data it points to is large and you want that data to be eligible for garbage collection, then you are correct to assign something small to that variable. undefined or null or "" will all work. What you're doing is clearing the reference to the large data so that it will be eligible for garbage collection. If nothing else in your javascript has a reference to that data, then it can be freed by the garbage collector. If anything else has a reference to it, then it cannot be freed.

For example, if you had a 10,000 element array held in a global variable:

var largeDataArray = new Array(10000);

And, you had filled most elements with data, then you could allow that memory to be eligible for garbage collection by assigning it some other value like:

largeDataArray = null;

or if you still want it to be an array:

largeDataArray = [];

Note: variables that themselves go out of scope (like local variables in functions that aren't part of a lasting closure) or variables in objects that themselves go out of scope do not have to be manually cleared. When they go out of scope or when the parent object is deleted, the data contained within will also be eligible for garbage collection.

So, the clearing of a variable only needs to be done when you explicitly want to free data that is held in a long lasting variable and it's usually only relevant to worry about this when the data is large or you have a lot of them that add up to multiple megabytes of data (memory use is of higher concern at lower levels on smartphones than in desktop browsers).

11
  • 1
    Well said (+1). Another way to clean up variable references: delete.
    – Matt Ball
    Dec 11, 2011 at 21:30
  • 4
    There is a delete in javascript, but it's mostly for deleting properties from objects, not like delete works in C++. You can read all about delete here.
    – jfriend00
    Dec 11, 2011 at 21:33
  • 1
    @haynar it's an operator, not a method: developer.mozilla.org/en/JavaScript/Reference/Operators/delete
    – Matt Ball
    Dec 11, 2011 at 21:33
  • 3
    largeDataArray.length = 0 deletes all elements. largeDataArray = [] changes reference of largeDataArray does not delete original array so doing something like arrayA = [0, 1, 2]; arrayB = arrayA; arrayA = []; console.log(arrayA, arrayB) => [], [0,1,2] Jul 27, 2017 at 6:21
  • 3
    @AdamMichalski - The point here is that reassigning anything to largeDataArray allows the previous array to be eligible for garbage collection (if there are no other references to it). Yes, you could also set .length to zero depending upon your circumstances.
    – jfriend00
    Jul 27, 2017 at 20:45
5

JavaScript has automatic memory management. Memory containing objects which are no longer referenced will be eligible for garbage collection, unless you have a memory leak. There is generally no need to manually assign undefined to variables.

If your program is using too much memory, you should shrink the arrays to get rid of elements you no longer need. See Array.pop, Array.shift, and Array.splice.

2
  • 53
    This is wrong that there is generally no need to manually assign undefined to variables. If you want the memory consumed by a large variable to be freed and that variable is long lasting (e.g. global or part of some object that persists), then one way to let the memory be freed is to reassign the variable something that is very small so the large data that was being used will no longer have any references to it and can be garbage collected. I didn't downvote yet, but I'm thinking about it because this post is misleading in some cases and wrong in others.
    – jfriend00
    Dec 11, 2011 at 21:18
  • 3
    Relying too much on the garbage collector is also not advised. In case of memory shortage the garbage collectors aggressively try to free up memory. Even though the garbage collectors have come a long way but such aggressive garbage collection can hit your performance. Jan 16, 2015 at 6:54

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.