Question

I’m making headway on understanding closures, but I don’t understand how the following example even creates a closure. I’ll quote a passage from ‘Learning jQuery’, page 392, and what the author says about the example.

The author says that because “readyVar persists between calls to the function”, we can see a closure is involved. But, to me, readyVar persists between calls to innerFn simply because the anonymous function has not yet finished executing. Once the anonymous function finishes, there will be no references to readyVar and it will be garbage collected. So where is the closure? I’m under the impression that a closure involves a variable being referenceable in a scope outside of that scope in which the variable was defined. But I don’t see that here.

Is the author saying that anytime an inner function references a value defined in an outer function, a closure is created? That can’t be what he’s saying, can it?

The rest of this message is a quotation from the aforementioned book.

$(document).ready(function() {
  var readyVar = 0;
  function innerFn() {
    readyVar++;
    $('#example-9').print('readyVar = ' + readyVar);
  }
  innerFn();
  innerFn();
});

This looks like many of our earlier examples, except that in this case, the outer function is the callback passed to $(document).ready(). Since innerFn() is defined inside of it, and refers to readyVar which is in the scope of the callback function, innerFn() and its environment create a closure. We can see this by noting that the value of readyVar persists between calls to the function:
readyVar = 1
readyVar = 2

Answer 1

For the duration of the $(document).ready function, all it’s local variables are active and hold their values and any code in that function or any embedded functions can reference them. While one could describe this as a function closure, this is more just how local variables work in a function.

If, inside the $(document).ready, there was an embedded function that stored a reference somewhere (like a click handler), then a lasting function closure would be established and the value of readyVar would last as long as any embedded references last. It’s essentially garbage collection. As long as something outside the function loop holds a reference to something inside the loop, the loop stays alive. At the point where the loop is done executing and nothing outside the loop holds any embedded function references to things inside the loop, the loop gets garbage collected and goes away.

Since there are not embedded function references in what you have now, it will get garbage collected (e.g. destroyed and freed) when it finishes executing.

Now, if you modified it to add a click handler like this, then you now have a lasting reference to a function inside the $(document).ready function with the click handler function. Since that lives on, even after the $(document).ready loop has finished executing, it will not be garbage collected and will live on as a function closure.

$(document).ready(function() {
  var readyVar = 0;
  function innerFn() {
    readyVar++;
    $('#example-9').print('readyVar = ' + readyVar);
  }
  innerFn();
  innerFn();
  $("#content").click(function(){  // external reference to within this function
      alert(readyVar);
  });
});

I sense from your question that you’re confusing local variables with function closures. The two are related, but not the same thing. Local variables are always available for the lifetime of the function. The lifetime of the function is the time it’s executing except when a reference to a closure within it causes it to last longer than that.

You might find this helpful: http://blog.morrisjohns.com/javascript_closures_for_dummies.html