Closure memory leak patterns in JavaScript

Question

Which of following JavaScript snippets will leak memory?

snippet #1:

function foo(obj)
{
    var obj2 = {};
    $('#something').click(function() { alert(obj.id); } );
}

snippet #2:

function foo(obj)
{
    var obj2 = {}
    $('#something').click(function() { alert('obj was not used.'); } );
}

snippet #3:

function foo(obj)
{
    var obj2= {id: 1}
    bar(function() { alert(obj2.id); } );
}

function bar(func)
{
    var obj3 = {};
    func();
}

and which variables won't be collected by Garbage Collector? How to fix leaks?

Jeremy J Starcher · Accepted Answer · 2014-06-10 23:41:03Z

3

As given, none of those will create memory leaks.

Leaks are held by not releasing memory -- everything there gets released.

By the way, none of the code you are showing uses closures.

Now, here are a handful of ways that "leaks" can be created.

// Simple leak -- an array that never lets go of memory
var arrayThatNeverShrinks = [];
function doleak() {
  var s = "1234567890";
  arrayThatNeverShrinks.push(s);
  window.setTimeout(doleak, 500);
}
//start if off
doleak();


// This function leaks because bigVar is used -- and kept -- 
// inside of the anonymous function inside.
    //Another leak, using closures
    var leakingFunction = (function() {
      var bigVar = "1234567890";
      return function() {
        alert("Hi there");
        var keepBigVar = bigVar;
      }
    }());

answered Jun 10, 2014 at 23:41

Jeremy J Starcher

24k6 gold badges56 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3559463 Over a year ago

According to link which says "Closures are functions that refer to independent (free) variables." my snippets are not closures because they are using anonymous functions as argument variable, am I right?

Jeremy J Starcher Over a year ago

Closures have to capture something from an outer scope "close over" that scope and hang onto it. Like in the example above, keepBigVar forms a closure because it hangs onto bigVar from the outer scope. "leakingFunction" executes and finishes -- it is gone -- but BigVar lives on.

user3559463 Over a year ago

just for making sure; function foo(obj) { $('#something').click(function() { var keepObj = obj; } ); } does this cause a leak?

Jeremy J Starcher Over a year ago

obj is caught in a closure, but unless you are calling foo multiple times, then it isn't a leak.

logic_ · Accepted Answer · 2017-07-27 04:10:03Z

3

Old question, but I have a couple of issues with the top-rated answer -

By the way, none of the code you are showing uses closures

The click handler in snippet one is very much a closure - it closes over the obj parameter that is passed to foo. Thus, the memory allocated for obj will not be released until foo is called again with a different object.

Not saying there's a leak here - just wanted to point out that snippet one does create a closure.

Also,

Leaks are held by not releasing memory -- everything there gets released

This is true for snippets #2 and #3, but not for snippet #1.

answered Jul 27, 2017 at 4:10

logic_

1131 silver badge4 bronze badges

Collectives™ on Stack Overflow

Closure memory leak patterns in JavaScript

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related