CleanCode NZ

We all start javascript programming in a procedure way, the functions and variables defined in the way everything are global, global variables are evil some even claim, on the other hand when scripts getting bigger, and object programming concept is being used more and more, you are facing with a daunting task of maintaining and refactoring your existing scripts, developing new code is also getting more and more difficult. To organize the code into classes is the right way to go down, further than that how about modules or name spaces in javascript? The answer is yes.

Here is an example of procedural style of javascript where we all began with

function foo()
{
};
function bar()
{
}
foo();

There is no name space concept in javascript, all we are going to do is to organize our code in a way that looks like a namespace that we are used to in other typed programming languages like java and .net, it is actually one global object.

Basically there are two ways we can achieve this. One way is creating a literal object that

  var ns1 = {
            foo: function () { },
            bar: function () { },
            v1: 'foo'
        };

        ns1.foo();

        var v2 = ns1.v1;

Another way is using a top level object with constructor(not literal)

  var ns2 = new function() {

              this.foo = function () { };

              this.bar = function () { };

              this.v1 ='foo';
          };

          ns2.foo();

          var v3 = ns2.v1;

          alert(v3);

I prefer the second way than the first one, as object literal has more restrictive syntax than a function block, they are separated by commas and assigned values through ‘:’, like a json string which sometime might be diffuclt to read. the second way is also easier to wrap up your old procedure code into a name space by just including the block under a big function which is a global object served as name space (ns2)

All the functions that need to be exposed have to use ‘this’ keyword to give a clear indication of scope within the object aka namespace.

Please take a notice of new keyword of ns2, without this, it is treated like a function, you basically cannot reference a function using dot annotation, in javascript even though you can do something like this

   var ns3 = function () {

             this.foo = function () { alert('foofun') };

             this.bar = function () { };

             this.v1 = 'foo';
         };

         var ns3instance = new ns3();

         ns3instance.foo();

       //  ns3.foo(); // XXXX, it is not a function

So you will have to create an instance of ns3, it is hardly anything like the namespace we expected

There is another concept in javascript ‘self executing function’ which we do not find any equivalent in object oriented programming languages, but it is everywhere in functional programming languages like clojure or lisps

     var ns4 = (function () {

             var pub = {};

             pub.foo = function () {

                 alert('ns4');
                 alert(this);

             };

             return pub;
         } ());

         ns4.foo();

Personally I would not go this way, as syntax is very hard to understand, one other thing is when you use ‘this’ keyword within self executing function, this always points to ‘window’, not the object itself, to me it does not have good modulation.

What I have shown is namespace.funcion() which is not exactly what we want for full scale object oriented programming. What we want is namespace.class references, here is the one, using foo as an object rather than function. and your modularised object oriented javascript programming starts from here.

    var ns5 = new function () {

            this.foo = function () {

                alert('ns5');
                alert(this)
            };

        };

 var o = new ns5.foo();