Writing better javascript – Part 6

 

One of the most commonly used debugging techniques when writing JavaScript is to use the ‘console.log(…)’ function available when using Firebug to print out useful information to help understand context and program flow. But the Firebug console object comes packed with a whole suite of other functions that can make your life even easier. The ones that I use most often are the ‘console.dir(object)’, ‘console.time(name) & console.timeEnd(name)’ and the ‘console.profile([title]) & console.profileEnd()’ functions.

console.dir(object) – Prints an interactive listing of all properties of the object. So, now you won’t have to find the code block and specify a breakpoint everytime you debug.

console.time(name) & console.timeEnd(name) – This pair of function starts and stops a named timer. So, this is invaluable in scenarios where you would like to have time estimates on processing heavy operations. I made heavy use of it when I was utilizing JavaScript templating in my applications. I was able to obtain the time taken for the processing the template and also for applying the template to an Object. I hope to be posting about the JavaScript templating techniques and their performance pretty soon in this series.

console.time(“Process template”);

var template = processTemplate(templ);

console.timeEnd(“Process template”);

console.time(“Apply template”);

var result = applyTemplate(template, data);

console.timeEnd(“Apply template”);

console.profile([title]) & console.profileEnd() – The profile view of the console tab in Firebug can sometimes be too overwhelming. In those cases, using this function pair will help narrow down your scope of search.

There are a bunch of other functions on the console object too and you should check it out. You never know when some of those functions could save your computer from having to listen to all those obscenties that you yell at it.

Advertisement

Writing better javascript – Part 5

Use the module pattern to better organize your code.

Good JavaScript programming practices will help you debug and diagnose problems better. It will also keep you sane when the applications grow bigger and will be more maintainable. One of the things that I tend to do these days when I see any applications developed using the ESRI JS API, Google Maps API or the VirtualEarth API is to do a “View Page Source” on the we page. It is surprising to see many of those applications have a considerable amount of application logic on the web page itself as a series of javascript functions. I have been using the JavaScript module pattern to better organize my code and I find it satisfactory for most of my requirements. Obviously, that is not the only way to organize your code but I like it because it helps me think in terms of classes with private & public properties and methods.

Creating a class using the module pattern is pretty simple. The snippet below illustrates how to create a new class. It is only an illustration of the technique and doesn’t mean much.

var MapManager = function(/*constructor arguments defined here*/) {

    //Declare private variables here
    var _mapElement;

    //Declare private methods here
    var _addLayer = function(layer) {
        //private properties and methods CAN be accessed here
        //public properties and methods CANNOT be accessed here

        //add the layer here
    };

    return {

        //Declare public properties here
        element: _mapElement,
        data: new Object(),

        //Declare public methods here
        addLayer: function(layer) {
            //private properties and methods CAN be accessed here
            _addLayer(layer);
        }
    };
};

The class ‘MapManager’ defined above defines its private and public memebers. When an instance of the ‘MapManager’ class is created the instance returned can only be used to access and change its public properties and methods and not its private members.  The ‘new’ keyword can be used to create an instance of the ‘MapManger’ class like below.

var instance = new MapManager();

Just for a little insight into the technique, when you create an instance of the class, the object that is defined as a JSON literal after the ‘return’ keyword is the object that gets returned. And this returned object still has access to the private members in the class definition above because of the concept of closures in JavaScript.

This technique should be satisfactory for most simple design needs but most JavaScript frameworks offer their own technique to create classes, inherit from them and other advanced OO concepts. I hope to post at a later time on inheritance when using the module pattern.

Writing better javascript – Part 4

JavaScript arrays are not associative.

I am not going to be writing about a JavaScript technique here but just about a JavaScript syntax which sometimes is not well understood. Arrays in JavaScript can be used a couple of ways like below.

var test = new Array();
test[0] = “Here is something”;
test[“name”] = “Here is another thing”;

As you can see, the array instance above is indexed using an integer and then a string. But an array by definition should only be indexed by an integer and not a string. So, how does JavaScript allow this? Well, JavaScript really doesn’t. Then how does the above piece of code work? Well, when you write something like “test[‘name’] = ‘Here is another thing'” what is really happening is that the value specified is not added to the list of items in the array but it gets stored in a property called ‘name’ on the array. The only reason the above syntax works is because an Array in JavaScript is also an Object. So, the value can also be retrieved by referencing ‘test.name’.

One last thing that I want to add to this post is how to iterate over all the properties of an Object.

var test = new Object();
test[“firstname”] = “Bill”;
test.lastname = “Gates”;
for(var item in test) {   
alert(test[item]);
}
//this should alert ‘Bill’ and ‘Gates’

This may not be news to everybody but it took me a while to realize this when i started writing JavaScript.