From my understanding, any memory allocated for a local variable is released at the end of the function. The only time this memory release does not occur (and a detached DOM node or memory leak occurs) is when that variable is referenced in a closure created within that local scope, and not properly nulled out inside the closure.

For example, the variable detached below (source - https://developer.chrome.com/devtools/docs/heap-profiling-dom-leaks):

    function start()

    {

      var p = document.getElementById("p");

      detached = document.createElement("div");

      p.appendChild(detached);

      p.removeChild(detached);

      fill();

    }

    

    function fill()

    {

      for (var i = 0; i < 25; ++i) {

        var div = document.createElement('div');

        div.data = new Array(10000);

        for (var j = 0, l = div.data.length; j < l; ++j)

          div.data[j] = j.toString();

        detached.appendChild(div);

      }

    }

I have recently been told that capturing an element with a jQuery object and storing that reference in a local variable will cause a detached DOM node after that element is removed, even when the scope of the function that captured the jQuery object has ended.

i.e.

    function myFunc() {

        var $div = $( 'div' );

    

        return;

    }

This does not seem right to me, I thought all local variables are released at the end of their scope unless there is some persistent reference, and therefore the removed DOM nodes should not have anything keeping it in memory and it will be garbage collected.

I was hoping someone could shed some light on this topic, preferably with sources.