My function somehow doesn’t have access to its parent closure & is missing variables. How?

Question

In my top-level function, I’m importing some dependencies using require.js. And they’re there, no problem. Within this function, I define a callback function and attempt to use some of the variables imported via require.js, that is, variables within the parent closure.

And they just aren’t there, as confirmed by a breakpoint and a peek at the Chrome inspector’s Scope Variables panel.

I understand that fn.apply and friends only set the context as far as this goes, not that they can destroy a reference to a closure or alter the scope chain.

define([
    'backbone',
    'backbone.vent',
    'app/utils/foo',
    'app/services/intent'
], function(Backbone, Vent, Foo) {
    'use strict';

    // Backbone, Vent, and Foo are defined here

    Vent.on('myevent', function(options) {
        // Backbone is defined here, but not Vent or Foo.
    });
});

How is this even possible?

And how can I fix it?

Answer 1

I suspect that the function where you set the breakpoint contains a reference to Backbone, but not Vent or Foo.

Closures are somewhat expensive on the JS runtime. It requires the engine wrap up the object in such a way that it keeps internal references to those variables so they can be resolved correctly at the time the function is executed. So for performance reasons, Chrome (and I suspect most other engines as well) has a tendency to optimize away any closure variables that aren't actually used when the script is compiled. This can lead to some confusing things when debugging, but it's to be expected.

Consider the following example (Note x, y, and z are defined in the scope of the outer function, not in global scope):

window.onload = function() {
  var x = 1, y = 2, z = 3;
  (function() {
    debugger;
    x++;
  })();
}

^{Alternate JSFiddle demonstration}

If you try to output x and y on the console when this script hits the debugger directive, this is what you'll see:

And if you look at the Scope Variable panel you'll see:

Why? because Chrome has determined that y and z are not used within the function so there's no need for the compiled code to keep a reference to the variable. If you add a reference to y within the script, then the compiler will keep a reference to it, and the name will no longer be undefined in the debugger.

Answer 2

if you use eval() inside your closure Chrome will not use any of it's performance optimizations which means you can see the value of y