Javascript: named closure and memory management

Question

I'm trying to know more about memory management in JS and I have some question about closures.

Case 1 :

// Suppose that object var is capable to emit events 
var object = new EventEmitter();

object.addEventListener('custom-event', function callback(event) {
    object.removeEventListener('custom-event', callback);
    object = null;

    //Do some heavy computation like opening a specific view or somehthing similar
    var heavy_window = new HeavyWindow();
    heavy_window.open();
});

Case 2 :

// Suppose that object var is capable to emit events 
var object = new EventEmitter();

object.addEventListener('custom-event', callback = function(event) {
    object.removeEventListener('custom-event', callback);
    object = null;

    //Do some heavy computation like opening a specific view or somehthing similar
});

My questions are:

• Case 1:

  • Is correct to think that the object remains in memory until the heavy_window is not nulled?
  • Nulling the object var inside the closure can help gc?

• Case 2:

  • Naming a closure in this way ...addEventListener(callback = function() {}) instead of ...addEventListener(function callback() {}) can cause a memory leaks? Declaring callback = function() {} will cause a global hidden variable?

Note, I don't need examples in jQuery or using other framework. I'm interested to know more in JavaScript vanilla.

Thank you in advance.

Answer 1

I don't think the details for garbage collecting is specified in the ES specification. However in most interpreters, objects will usually be garbage-collected once there doesn't exist any references to the object or not accessible, or scheduled at a later time.

In case 1, heavy_window might have access to the original new EventEmitter ( event often has references to the event target) if you pass the event object into HeavyWindow , and thus your new EventEmitter() might not be garbage-collected until all references to your heavy_window are gone. If not, then your new EventEmitter will be garbage-collected at some point in the future.

In case 2, assigning the callback function to a global variable callback will not change anything because the callback function do not have any reference to the actual new EventEmitter object you have created. (Again, unless event has a reference to the new EventEmitter object you have created.)

In reality things might be a little different since garbage collectors in browsers are fairly complex. At what time the interpreter decides to collect the garbage is really up to it, but the bottom line is that it will only do it when all references to an object are gone.

Memory management usually isn't really a concern is JavaScript and you shouldn't need to be thinking about it most of the time. You will know it if there is a memory leak and able to detect it by using developer tools provided by the browser.