javascript : 7 tips for better coding

1- Use short hand notation for declaring arrays and objects

Arrays and objects are declared as following:

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

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:

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

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

If you take the first approach, you are in a mess. It will look for 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.

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

4-    Specify radix while using parseint (always)

Just try this.

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. has a test which measures the execution times of various methods in different browsers ( 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.

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:

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.

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

Related Posts

7 thoughts on “javascript : 7 tips for better coding”

  1. 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.

  2. Thanks – some good tips there. Here’s a tip for you – you could do with a sub-editor. Quite a few language errors there.

Leave a Reply