javascript module pattern variable scope

Question

I am learning javascript and the module pattern, but I made a mistake in my code and it proved wrong some of the concepts I though were true about this pattern. My basic code is like this:

(function(window,$){

//global menu object
var menu = (function(){

    //menu tab component
    var tab = (function(){

        //public properties
        var tab = {
            init:doStuff
        }

        //private properties
        function doStuff(){
            alert("initialising Tab")
        }

        //return public properties
        return tab;
    })();

    //menu curtain component
    var curtain = (function(){

        //public properties
        var curtain = {
            init:doStuff
        }

        //private properties
        function doStuff(){
            alert("initialising Curtain")
        }

        //return public properties
        return curtain;
    })();

    //menu content component
    var content = (function(){

        //public properties
        var content = {
            init:doStuff
        }

        //private properties
        function doStuff(){
            alert("initialising Content")
        }

        //return public properties
        return content;
    })();

    //public properties
    var menu = {
        init:initialiseMenu
    }

    //private properties
    function initialiseMenu(){
        //initialise each component of the menu system
        tab.init();
        curtain.init();
        content.init();

    }

    //final menu object
    return menu;
})();

window.menu = menu;
})(window,jQuery);

Then When my page loads and the code is called:

menu.init();

It gives the alerts in order:

initialising tab
initialising curtain
initialising content

As I expect. But if I change the content component to be like this:

   //menu content component
    var content = (function(){

        //public properties
        var content = {
            init:doStuff
        }

        //private properties
        function doStuff(){
            alert("initialising Content")
        }

        //CHECK ACCESS TO PREVIOUS VARIABLES
        curtain.init();

        //return public properties
        return content;
    })();

it gives out the alerts in order:

initialising curtain
initialising tab
initialising curtain
initialising content

So I see that it is able to access the curtain variable even though it wasn't passed into the module as an argument. I thought that each module would be self contained but I have discovered that this is not the case, Is there anyway to make a module only have access to variables you want it too? in particular to my example would be helpful, Thanks Dan.

Jamie Treworgy · Accepted Answer · 2012-04-25 21:51:49Z

2

Each module is not self contained, rather, it creates a new scope that is a superset of the one in which it was created. The only thing that defines a new scope in Javascript is the function statement. Within a new scope, everything from the outer scope is visible unless overridden by a variable of the same name. Nothing in the inner scope is visible to something outside it.

var global;
function outer() {
    var outerVar;

    function inner() {
        var innerVar;

        // global, outerVar, and innerVar are visible

    }   
    function inner2() {
        var inner2var, outerVar;

        // global and inner2var are visible
        // outerVar hides the previous outerVar, which is no longer accessible

    }

    // global and outerVar (the first one) are visible

}

The fact that your functions are self-executing doesn't make a difference. Anything created in an outer scope will be visible in your inner scope, unless your create a new local variable of the same name which supercedes it.

As far as your inner scope is concerned, anything that was created outside it is much the same as a global. (And a global is just a variable created in the default scope, "window" in a browser).

You could think of an inner scope like being behind one-way glass. You can still see everything in the world, but the world can't see you. And you can always choose to block the one-way glass so you can no longer see out. But nothing will ever be able to see in.

edited Apr 25, 2012 at 21:51

answered Apr 25, 2012 at 21:23

Jamie Treworgy

24.4k9 gold badges81 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Janus Troelsen Over a year ago

is this still current with ES6 released?

Jamie Treworgy Over a year ago

Yes, ES6 is a superset of ES5. There are some new scope constructs like let but this code is still valid

Ray Wadkins · Accepted Answer · 2012-04-25 21:25:40Z

0

The current scope for any function can see it's contained scope. So, content still has access to any variables in menu, which include curtain.

answered Apr 25, 2012 at 21:25

Ray Wadkins

9141 gold badge7 silver badges16 bronze badges

Comments

gdub · Accepted Answer · 2012-04-25 21:45:03Z

This is happening because when you call 'return' in each object, you are assigning to the component variable the return value, which is the inner 'public properties' object in each of your components.

var tab = (function(){

    //public properties
    var tab = {
        init:doStuff
    }

    //private properties
    function doStuff(){
        alert("initialising Tab")
    }

    //return public properties
    return tab;
})();

Here you are assigning the original variable 'tab' with the result of the anonymous function you are executing. The object in this case is:

    var tab = {
        init:doStuff
    }

because you return this object at the end of the function's execution.

To achieve what you're after, try returning an object that has 'public' modifier functions that access variables within the function's scope. Any variable created within a function has scope only to that function or functions within its scope, thereby making them effectively private (Javascript is functionally scoped). The following example should help you with your code:

var tab = (function(){

    //public properties
    var PublicProperties = {
        init:doStuff,
        modifyPrivateVar: function(value){
            this.somePrivateVariable = value;
        }
    }

    //private variables/properties
    var doStuff = function(){
        alert("initialising Tab")
    }

    var somePrivateVariable = 'private!';

    //return public properties
    return PublicProperties;
})();

Now your variable 'tab' will be assigned the value returned to it (the PublicProperties object) by the execution of the anonymous function. You will have access to the functions "init" and "modifyPrivateVar", but you cannot call "doStuff" or change "somePrivateVariable" directly. This demonstrates that you can change a variable through a modifier function but cannot access it directly, thereby making it effectively private.

If you wish your "init" function to be called as a constructor, you must execute your "constructor function" within the execution of the component's anonymous function execution, or just write the code in-line and it will be executed as the component's anonymous function executes.... otherwise you should not be returning anything related to the init function if it is private, only return functions that can be used to modify/activate your objects in a safe way.

Collectives™ on Stack Overflow

javascript module pattern variable scope

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related