javascript : 7 tips for better coding

1- Use short hand notation for declaring arrays and objects

Arrays and objects are declared as following:

var someArray = new Array();
var someObject = new Object();

There is a shorthand notation for declaring these which is much more easier to use. It can be used like this:

var someArray = [];
var someObject = {};

2- Use square bracket notation – [] – to access property of an object rather then using . (dot) notation

There is a good reason why you should do this. Suppose you have an object like following:

var myObject = { "name1" : "some name" , "name2" : "another name" , "name3" : "yet another name" };

Properties of myObject can be accessed using either of the 2 ways.

var value = myObject["name2"]; // will output another name
var value = myObject.name2; // will output another name

Now assume you want to access these values dynamically (probably in a loop). Now see what happens.

var result = myObject.name + i; //this is an error

var result = myObject['name' + i]; // this is good. will output correct value depending on value of i

If you take the first approach, you are in a mess. It will look for myObject.name and will try to add the value of i to it and thus an error
Using the second method is safer and readable too.

3-    Break a long string into multiple lines

This surely makes code more readable. You can do it like below.

var longStr = "This is a long long "
+ "string which has been "
+ "broken into "
+ "multiple lines.";

Think there is only one way of doing so? No, Here is another(lesser known) method:

var longStr = "This is a long long \
string which has been \
broken into \
multiple lines.";

4-    Specify radix while using parseint (always)

Just try this.

var result = parseInt("012"); // gives 10

Baffled!!! You expected 12 but got 10. Solution? Always specify the second parameter(radix) while using parseInt. By default parseInt considers strings starting from 0 as octal numbers. So unless you want an octal or hexadecimal just pass 10 as second parameter to parseInt. Read more details about this behavior on this post.

5- innerHTML is faster than w3c DOM methods

There are 2 ways you can alter content of any html element from javascript. innerHTML property or w3c DOM methods. Wherever possible user innerHTML because it is faster than DOM methods. Quirksmode.org has a test which measures the execution times of various methods in different browsers (http://www.quirksmode.org/dom/innerhtml.html). All results show that innerHTML is fastest.

6- Setting innerHTML does not always work (in IE specifically)

Yes, that’s right. Manipulating the DOM from javascript is a common practice.

document.getElementById(id).innerHTML = 'some html';

However, the above does not work in IE for some elements. Don’t know why MS did it. (Read what MSDN says). The elements for which innerHTML can’t be set are col, colgroup, frameset, head, html, style, table, tbody, tfoot, theaf, title, tr. Trying to set innerHTML for these elements will fail. Instead, use DOM methods for these elements.
Also, setting innerHTML of select box cannot be relied upon  in IE (Read full article here).
It displays some weird behavior. Avoid innerHTML for select too. As said above, use DOM methods in this case.

7- Always count large arrays before iterations

0k. This is not particular to javascript but applies to all languages. Consider an array of 10,000 items.
Normally, a for loop will go like following:

var largeArray; // // this array has 10,000 items
for( var i=0; i < largeArray.length; i++)
{
    //do something
}

In above case javascript has to calculate length of array in each iteration and then check the termination condition. It will be far more efficient if we calculate length of array before loop, store it in a local variable and use this local variable for comparison.

var largeArray; // this array has 10,000 items
var l = largeArray.length;
for( var i=0; i < l; i++)
{
    //do something
}

This will save javascript from calculating the array length in each iteration and will be faster.

6 thoughts on “javascript : 7 tips for better coding

  1. Kevin

    Short handing code does not make it better. You may prefer someObj = {}, but to an experienced javascript developer this can be confusing. Readability makes great code.

    Reply