closures in javascript understanding example

Question

function setupSomeGlobals() {
    // Local variable that ends up within closure

    var num = 666;
    // Store some references to functions as global variables
    gAlertNumber = function() {console.log(1); alert(num); }
    gIncreaseNumber = function() { num++; }
    gSetNumber = function(x) { num = x; }
}

how can I accesss here gAlertNumber method?

update: this code is the Example 4 in an answer on How do JavaScript closures work?

You cannot access it outside the function because it is not in scope, and you have no accessible reference to it — musefan, Oct 11 '13 at 12:57
@Jeffman, @musefan: `gAlertNumber` is a global variable. Why you think it isn't accessible outside of `setupSomeGlobals`? [fiddle](http://jsfiddle.net/j5yTn/) — Andreas, Oct 11 '13 at 13:01
That's a bad way to initialize globals, and you really shouldn't be using global variables anyway. In "strict" mode it'd be an error. — Pointy, Oct 11 '13 at 13:03
use `window.gAlertNumber = ...;` for explicit creation of global objects that works in strict mode as well. better yet, wrap your code into a module to later access it simply by `window.MyModule.alertNumber();` — Aprillion, Oct 11 '13 at 13:13

score 1 · Accepted Answer · answered Oct 11 '13 at 13:18

Assuming you're in a web browser, you have to execute setupSomeGlobal() first. Then your non-declared handler variables g... will be created under the global object window and you'll be able to execute gAlertNumber() from anywhere in your page.

You could execute setupSomeGlobal() in the body's onload :

<html>
    <head>
        <script>
            function setupSomeGlobals() {
                // Local variable that ends up within closure

                var num = 666;
                // Store some references to functions as global variables
                gAlertNumber = function() {console.log(1); alert(num); }
                gIncreaseNumber = function() { num++; }
                gSetNumber = function(x) { num = x; }
            }
        </script>
    </head>

    <body onload="setupSomeGlobals();">
        <input type="button" value="Show me more or less the number of the beast" onclick="gAlertNumber();"
    </body>
</html>

That said, your method of setting up "global" functions isn't very pretty. I quite like the pattern described here for example.

Anshad Vattapoyil · Answer 2 · 2013-10-11T13:11:58.710

0

Here is an example,

(function() {
   console.log(1);
   // Local variable that ends up within closure
   var num = 666;
   var sayAlert = function() { console.log(num); }
   num++;
   return sayAlert();
})();

This will call immediately after definition.

So with your code,

function setupSomeGlobals() {

  var num = 666;
  // Store some references to functions as global variables
  gAlertNumber = function() {console.log(1); alert(num); }
  gIncreaseNumber = function() { num++; }
  gSetNumber = function(x) { num = x; }

  gAlertNumber();

}
setupSomeGlobals();

Here you can call the child function gAlertNumber() inside your parent function setupSomeGlobals() and you cannot access it outside the parent function.

But you can call this after calling parent function, that means don't call the gAlertNumber() inside parent function. call it after calling parent like,

function setupSomeGlobals() {
    // Local variable that ends up within closure
    var num = 666;
    // Store some references to functions as global variables
    gAlertNumber = function() {console.log(1); alert(num); }
    gIncreaseNumber = function() { num++; }
    gSetNumber = function(x) { num = x; }
}

setupSomeGlobals();
gAlertNumber();

edited Oct 11 '13 at 13:11

answered Oct 11 '13 at 12:58

Anshad Vattapoyil

23,145
18
84
132

i don't get i got an example from the second answer here http://stackoverflow.com/questions/111102/how-do-javascript-closures-work?rq=1 there is no var there – user2114177 Oct 11 '13 at 13:05
and if we write 'gAlertNumber(); like u suggested what can we do with gIncreaseNumber ? – user2114177 Oct 11 '13 at 13:06
@Pointy You mean for what reason? – Anshad Vattapoyil Oct 11 '13 at 13:07
Note that the second example is not [strict javascript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode). – Broxzier Oct 11 '13 at 13:07
I think there is no need to use ``var`` and if you are used with ``var`` also you can't call it outside. – Anshad Vattapoyil Oct 11 '13 at 13:08
so help to see how can we use this 3 methods to understand closure instead of arguing about using or not using var – user2114177 Oct 11 '13 at 13:09
@devo well I hadn't really understood what the OP is doing (which probably means I need my head examined, given the name of the function). – Pointy Oct 11 '13 at 13:09
I would +1 if you just answered the question with the 3rd example without metaphysical introduction - that is exactly how to access `gAlertNumber` method. – Aprillion Oct 11 '13 at 13:22

score 0 · Answer 3 · answered Oct 11 '13 at 13:20

Return an object from setSomeGlobals() that contains the three methods. Through this object you will be able to access the functions of interest and manipulate num and keep its state, but you will not be able to access num directly. This is known as the module pattern, an application of closure.

score 0 · Answer 4 · answered Oct 11 '13 at 13:21

Well this will work in browser

gAlertNumber is considered being window property.. It would be the same as calling

  window.gAlertNumber()

so inside your setSomeGlobals you assign function object to the undefined window property. Than you close the local variable num inside that object which is already created inside window object. Thus you can access it from window scope.

closures in javascript understanding example

4 Answers4