javascript organisation

Question

I came across this Q/A on javascript code organisation.

var DED = (function() {

var private_var;

function private_method()
{
    // do stuff here
}

return {
    method_1 : function()
        {
            // do stuff here
        },
    method_2 : function()
        {
            // do stuff here
        }
};
})();

Currently I do this,

 var DED = new Object;
 DED = {
            sidebar : {
                      method_1 : function (data){
                                //some stuff
                                },
                      method_2 : function(data){
                                //do more
                                }
            },
            main : {
                   //.......
            },
            globalVariables : {
                   //...
            }

 }

What is the advantage of one over the other?
Warning: newbie here.

This would be much easier to answer if the first and the second example would use the same names. — jwueller, Dec 28 '10 at 23:22
minor remark: you don't need to initialize DED as a new Object. The object-literal notation in the next line will do the same thing. Just don't forget the 'var' if you want local scope. — kioopi, Dec 28 '10 at 23:31
@kioopi if you did forget 'var', does that mean it would bind DED to the window.DED property (assuming it's running in a browser)? — jamiebarrow, Aug 25 '11 at 11:02
@jamiebarrow yes, exactly. it's a very bad part of javascript to default to global scope. — kioopi, Aug 27 '11 at 06:18

score 4 · Accepted Answer · answered Dec 28 '10 at 23:21

As indicated, that method uses closures to implement private functions and data. It's an alternative to the constructor method (below). E.g.

var DED = new (function()
{
  var private_var;

  function private_method()
  {
    // do stuff here
  }

  this.method_1 = function()
  {
    // do stuff here
  };

  this.method_2 = function()
  {
    // do stuff here
  };
})();

With the DED method shown in your question, there is no constructor. Rather the function returns an object created from an object literal. The functions in that object have the private variable and method closed into them.

after using them, realised that constructors are awesome – Mr Hyde Dec 29 '10 at 19:40 — Mr Hyde, Dec 29 '10 at 19:40

kioopi · Answer 2 · 2010-12-29T00:20:30.720

0

What you return from the anonymous self-calling function (function(){})() is the interface you publish for your "module" (DED).

DED.method_1() is public. private_method/private_var are not accessible from outside but everything inside of your self-calling function has access to them.

If you like this kind of access-control this is a good way to prevent other developer from accidentally messing with the internals of your module. In a lot of cases i'd just go for a naming convention like a leading underscore to indicate internals.

Javascript is very dynamic and if someone really wants to mess with code they have no write-access to they will be able to do so. Edit: This turns out to be a wrong assuption and not the case for private data in constructors or closures. Please, see: http://www.crockford.com/javascript/private.html

edited Dec 29 '10 at 00:20

answered Dec 28 '10 at 23:29

kioopi

2,170
2
18
26

hmm, the 'access-control' makes a lot of sense. Am learning presently, so never thought of 'other developers' creating problems – Mr Hyde Dec 28 '10 at 23:33
2

How exactly do you think other code could access the private variables? – Matthew Flaschen Dec 28 '10 at 23:37
1

Interestingly, i stumbled on an edge-case where closured private members might be accessible: http://jsfiddle.net/cmsalvado/87C7c/ It uses the non-standard property 'caller' of arguments. – kioopi Aug 27 '11 at 22:34

javascript organisation

2 Answers2