Question

I refactored my JS code recently and stumbled upon this pattern:

APP = (function() {
  var x,y,z;
  function foo() {}
  function bar() {}
  return {x:x, y:y, z:z, foo:foo: bar:bar};
})();

The advantage to this is that it creates non-global variables with the functions having access to everything defined in APP. So APP.foo can access x, y, z, and bar without typing APP.bar(), APP.x, etc. Everything can also be accessed globally with APP.bar(), APP.x, etc. You can also nest them:

APP = (function() {
  var x,y,z;
  function foo() {}
  function bar() {}

  var WIDGETS = (function() {
    var a,b,c;
    function hello() {}
    function world() {}
    return {a:a, b:b, c:c, hello:hello, world:world};
  })();

  return {x:x, y:y, z:z, foo:foo: bar:bar, WIDGETS:WIDGETS};
})();

So WIDGETS would have access to variables in APP, but not visa versa (APP.WIDGETS.hello can use foo(), but APP.foo has to use WIDGETS.hello()).

I tried creating this pattern using ERB (I’m on Rails), but it turned out messy. So I’m thinking of writing a small source-to-source compiler for this – something like CoffeeScript (with the minimal difference/extended language philosophy of SASS) that just compiles a few functions to alternative javascript.

I just want a shorthand.

For example, this would compile to my second code block above:

//NAMESPACE is a magical function I compile down to the long version in the second code block
APP = NAMESPACE(function() {
  var x,y,z;
  function foo() {}
  function bar() {}

  var WIDGETS = NAMESPACE(function() {
    var a,b,c;
    function hello() {}
    function world() {}
    //**notice the missing return statement that I don't need to manage and map to my variables**
  });
  //**notice the missing return statement that I don't need to manage and map to my variables**
});

Simple and small – just so you don’t need to keep track of the variables. Would also like to separate the namespace like thus (so I can split it to multiple files):

APP = NAMESPACE(function() {
  var x,y,z;
  function foo() {}
  function bar() {}
  //**notice the missing return statement that I don't need to manage and map to my variables**
});
APP = NAMESPACE(function() {
  var WIDGETS = NAMESPACE(function() {
    var a,b,c;
    function hello() {}
    function world() {}
    //**notice the missing return statement that I don't need to manage and map to my variables**
  });
});

Any thoughts on how to do this? I’m not sure about everything, but I think if this existed, I’d like Javascript a lot more.

Answer 1

Things you might want to look into:

• Narcissus: https://github.com/mozilla/narcissus/
• Traceur: http://code.google.com/p/traceur-compiler/
• Reflect.js: https://github.com/zaach/reflect.js
• http://www.mascaraengine.com/doc/languagewalk
• https://github.com/jashkenas/coffee-script/wiki/List-of-languages-that-compile-to-JS

There is also a proposal for a module system in EcmaScript 6 that could become available in the future: http://wiki.ecmascript.org/doku.php?id=harmony:modules

Now, if the goal is just typing foo() instead of APP.foo() then I think creating a language superset of javascript is a bit of a stretch…

If you use CoffeeScript exporting the variables is less verbose:

APP = do ->
  [x,y,z] = []
  foo = ->
  bar = ->

  WIDGETS = do ->
    [a,b,c] = []
    hello = ->
    world = ->
    { a, b, c, hello, world }

  { x, y, z, foo, bar, WIDGETS }

In practice you seldom export every variable, in fact you some of them to be “private”. You could also define the functions inside the object itself:

APP = (function() {
  var x,y,z;

  var WIDGETS = (function() {
    var a,b,c;
    return {
      hello: function hello(){},
      world: function world(){}
    }

  })();

  return {
    foo: function foo(){},
    bar: function bar(){},
    widgets: WIDGETS
  }

})();