Question

How does jQuery (JavaScript) and gc work?

callBack is a function that runs as a callback to a JSON response.

What will be in memory when the callBack function has executed?

What I would like to hear is that the data object and the autoCompleteData will be garbage collected. And only the data stored in $("input#reciever") resides in the memory.

Is this the case?

//The code in question:

var callBack = function(data) {
    var autoCompleteData = jQuery.map(data.receivers, function(receiver, i){
          return {label: receiver.name, id: receiver.id };
    });

    $("input#reciever").autocomplete({
        source: autoCompleteData,
        select: function(event, receiver) {
            $("input#reciever").val(receiver.item.label); 
            $("input#recieverId").val(receiver.item.id);
            return false;
        }

    });
}

Answer 1

Garbage collection in Javascript works by freeing the memory of any object that no other javascript code has a reference to. If nobody has a reference to it, it can’t be in use any more so it can be safely freed.

References to an object can be from a variable or from a scope of execution that is still active.

In your example above, while waiting for the .autocomplete() function to finish, everything in your code is still in scope and nothing will be garbage collected. That means that autoCompleteData will be preserved (and not garbage collected) until the .autocomplete() method is completely done executing. This is normal, expected and, in fact required for proper function in many places.

As a measure of one reason why this data is still in scope, the variable autoCompleteData is still in scope in the select callback function. It would be legal and proper for you to reference that variable in the select callback function. Thus the JS engine must not garbage collect it until it is no longer in scope and can no longer be referenced by any code.

In some cases, you can cause memory to be available for garbage collection by explicitly clearing a variable.

For example, if you restructured your code like this:

var callBack = function(data) {
    $("input#reciever").autocomplete({
        source: jQuery.map(data.receivers, function(receiver, i){
          return {label: receiver.name, id: receiver.id };,
        select: function(event, receiver) {
            $("input#reciever").val(receiver.item.label); 
            $("input#recieverId").val(receiver.item.id);
            return false;
        }

    });
}

Then, the autocomplete data only exists as an argument to .autocomplete() and it may be eligible for garbage collection sooner as there is no requirement by the JS engine that is keep that data until the select callback is called as there was before. Whether the data is actually garbage collected right away depends upon whether the internal implementation of .autocomplete() stores it away somewhere that lasts until the select method is called or not.

FYI, the exact timing of garbage collection matters the most with big pieces of data (many megabytes), zillions of pieces of data (lots of pieces of data that add up to hundreds of megabytes. If the size of something is measured in kilobytes or even hundreds of kilobytes and there’s only one of it, then the exact timing of whether the memory is garbage collected immediately or when a callback gets called is not really all that important as browsers these days have access to a reasonable amount of memory. If you were dealing with giant pieces of data or dealing with zillions of them or doing something repetitively and had some sort of leak, those could all cause problems (particularly on mobile), but an example like you have above is unlikely to cause an issue unless the data set is large relative to the memory available in the browser.