2

I have this code snippet which I am using to demonstrate how closures work. I use the console.dir function to print the function scope in google chrome inspector. The part that I am not able to figure out is JSBin doesn't show the Closure in inspector while JSFiddle does. The code that's tested is same in both.

var outer = 2;

var addTo = function() {
  var inner = 3;
  return outer + inner;
};

console.dir(addTo);

Below is the JSBin link shared below.

http://jsbin.com/juhokoteho/edit?js,console

JSFiddle shows the closure inside the function scope. I am not able to figure out why ? This can't be anything to do with the JS engine because I am executing both on chrome ? or is it not so ? JSFiddle Screenshot

JSBin Screenshot

Vinayak Kolagi
  • 1,831
  • 1
  • 13
  • 26
  • Because one is a `console` implemented in javascript, not being able to access any internals, and the other are the browsers builtin developer tools where the console is tightly integrated with the debugger? – Bergi Jul 19 '16 at 11:52
  • Even in case of JSBin, I am looking at the chrome's console. Not the JSBin's console tab. – Vinayak Kolagi Jul 19 '16 at 12:01
  • Can you show a screenshot of that as well, please? (Still, the answer seems to be that Jsbin messes with the `console` object while jsFiddle does not) – Bergi Jul 19 '16 at 12:06
  • ^^ Added the screenshot of JSBin – Vinayak Kolagi Jul 19 '16 at 12:12
  • While the screenshot tells me the same that JSBin environment is somehow messing the console object, I want to know why exactly its happening. If you can lead me to official links or any other resources that would be helpful. – Vinayak Kolagi Jul 19 '16 at 12:13
  • Can you share a link to your jsfiddle as well? I bet it has nothing to do with the JSBin environment. – Bergi Jul 19 '16 at 18:59
  • …but rather you are [experiencing](http://stackoverflow.com/q/14328963/1048572) [this](http://stackoverflow.com/q/5431351/1048572) [difference](http://stackoverflow.com/q/5468350/1048572) as well. – Bergi Jul 20 '16 at 01:40

1 Answers1

4

Closures are functions that refer to independent (free) variables (variables that are used locally, but defined in an enclosing scope).

If we use this definition from the MDM and apply it to your basic example and run it in a browser (no JSBin or JSFiddle).

<html>
  <head></head>
  <body>
    <script>
      var outer = 2;

      var addTo = function() {
      var inner = 3;
      return outer + inner;
      };

      console.dir(addTo);
    </script>
  </body>
</html>

If we take a look at the console, you'll get the following output:

No Closure

There is no closure like on JSBin and it's the expected behavior. We don't have any variable used locally but defined in an enclosing scope. outer is defined in the global scope and not in an enclosing scope.

Now, if we use the exact same code but insert it in a self-executing anonymous function:

<html>
  <head>
  </head>
  <body>
    <script>
      (function (){
        var outer = 2;

        var addTo = function() {
        var inner = 3;
        return outer + inner;
        };

        console.dir(addTo);
      })();
    </script>
  </body>
</html>

The console output will be the following:

A closure

outer is no longer defined in the global scope but inside an enclosing scope, the scope of the self-executing anonymous function and is use locally in the addTo function. According to the definition, it is a Closure.

Regarding JSBin and JSFiddle, both of these sites will execute your code in a iframe for security reasons. On JSBin, the iframe looks like this with your code:

<body>
  <script>
    try {var outer = 2;

    var addTo = function() {
    var inner = 3;
    return outer + inner;
    };

    window.runnerWindow.proxyConsole.dir(addTo);
    } catch (error) { throw error; }
  </script>
</body>

If we take a look at outer, it's not defined in an enclosing scope. try does not define a scope here since JavaScript has function scope but not block scope. As expected and as proven by your tests, there is no Closure element in the console.

JSFiddle, on the other hand, use a different code in his iframe to execute your code:

<head>
  <script type="text/javascript">
    window.onload=function(){
      var outer = 2;

      var addTo = function() {
      var inner = 3;
      return outer + inner;
      };

      console.dir(addTo);
    }
  </script>
</head>

On JSFiddle, your code is wrapped in an anonymous function which will be executed on the onload event of the window. Your outer variable is in this case a locally used variable defined in an enclosing scope and is a closure. That's why when you took a look at your console, you saw a Closure in the output.

HiDeoo
  • 10,353
  • 8
  • 47
  • 47