Mighty Javascript | GSoC Week Zero - Laying Foundations

Although Akshit had told me about the existence of the book 'Javascript: The Good Parts' back in January, I hadn't really bothered to go through much of it. How would I have known in January that I would be contributing Javascript to an open source organization?

The first few weeks in my GSoC project involves AJAXification of the interface of ATutor. Apart from developing an AJAX demo, I had had extensive discussions on the UI redesign with my mentor, Alex. We also plan to change the existing CSS to SASS so that small changes don't require changes to multiple files of different templates.

You can have a look at this video for a review of the good and the bad parts.

Although I had no idea of closures, I got to know about it just yesterday. In JavaScript, everything is declared in a global namespace. It is like one big huge universal object where everything exists. Like the universe! That leads to name collisions, which makes the unexpected results impossible to debug. That is why we put all our JavaScript code in a file in the following format (called a self invoking function). The following piece of code is said to be in closure.

(function () {
    var temp = 5;
 
    $.each([1, 2, 3], function(index, element) {
        // do something
    });
 
})();

The problem that arises now is how to make the value of temp available to some other file in some other place. That is solved by declaring a namespace which remains public. Using namespaces removes conflicts as I am usually conifned to my own namespace and it avoids functions like 'debug'.

var MyNameSpace = MyNameSpace || {}; //make sure we don't overwrite it in case it already exists

(function () {
    MyNameSpace.temp = 5;
 
    $.each([1, 2, 3], function(index, element) {
        // do something
    });
 
})();

The functions inside that self invoking function are private unless we put them in the namespace.

var MyNameSpace = MyNameSpace || {};
 
(function () {
    MyNameSpace.temp = 5;
 
    MyNameSpace.foo = function () {
    // This can be accessed by in other files or for handling events like onclick = "MyNameSpace.foo();"
    };
 
    var bar = function () {
    //Not accessible outside
    }
 
    var private_variable = "myValue";
 
    MyNameSpace.public_var = "I can be accessed!";

})();

This is the way we achieve object oriented programming in JavaScript.

Note that putting the semi colons in right positions are important. The reason is that once JavaScript is compiled, semi colons are put automatically- and that behaviour can be unpredictable.

There are some other things that are considered good programming practices. Take for example the following code.

//Not very good. Too many tabs and brackets. Return more often
var someFunc = function () {
    if (something) {
 
        // do A
        // do B
        // do C
     
    }
};

Instead, do the following.

//Easier to read. Less tabs and brackets. Code is self-explantory
var someFunc = function () {
    if (!something) {
        return;
    }
 
    // do A
    // do B
    // do C
 
};

For variable declaration, use the following format.

var myVar1 = "stuff",
    myVar2 = 3,
    myVar3 = "something",
    notDefinedAtStartVar1, willusethisone2, someother3;

Note the positioning of the commas because if you miss one, the variables after it get messed up.

That would be all for now. You can check my now cleaned up code here.