Question

I’m playing around with a backbone calendar app (it lets you post events on a calendar) in Chrome javascript console and notice on the right side (see image) it has a panel showing local, closure and global scope. In this particular app, I set debugger in the EventsView, and Chrome tells me that the Event (a model) and the EventView (view for one particular event) are in Closure scope.

I sort of understand global, closure and local. Global scope would be anything in the global namespace. Local is all the variables within the current scope. Can you explain in practical terms what it means for the Event and EventView to be in closure scope and how this might improve my understanding of how the app is working…What insight can this provide me? Also, you’ll notice that in the Local scope, ‘this’ is said to be a ‘child.’ Why? What would the parent be?

Answer 1

Read up here on closures: How do JavaScript closures work?

But the short answer, assuming you’re paused on a breakpoint on line 6 below, the variable ‘global’ will appear in the Global variables section of debug tools, ‘closure’ in the Closure section, and ‘local’ in the Local section:

1 var global = 'foo';
2
3 function bar() {
4   var closure = 'baz';
5   function oof() {
6       var local = 'rab'; // stopped on a breakpoint on this line
7   }
8 }

When debugging, it’s just helpful to know how many closures up you need to look to find the variable definition, how many other contexts it might apply to, the consequences of changing it in local scope, etc.