Simple but Effective JavaScript Coding Basics

I am not an expert in Javascript. Though, I can share some points which are more significant when you use javascript in your applications.

• Cache element property when access multiple times. In DOM, it's an extensive search of the element to find the same property over and over again. Perfect example is document object

var divelt =       document.getElementById("div1″);

var img =       document.getElementByTagName("img");

instead use

var doc = document

var divelt = doc.getElementById("div1″);

• Use Local variables rather than Global variables, because local variables are fast, global variables are little performance penalty.

for(i=0; i < array.count; i++){

alert("array data : " +array[i]);

}

store array.count into local variable like count = array.count and use it.

for(i=0; i < count; i++){

alert("array data : " +array[i]);

}

• Don't use eval() when not necessary
  • eval statement is expensive in terms of performance
  • eval parameters are executed dynamically. So it's hard to understand the program and the program is not more reliable.
• Don't wrap try/catch within loops. - Every catch statement, javascript creates dynamically scope.
• Don't pass function as a string to setTimeout() - setTimeout("myFunction()","") - Internally this will use eval statement instead use function reference like setTimeout(myFunction,....).
• Don't use symbol + for concatenating strings, use String.concat() or Array.join
• Don't use function constructor like new Function() -  as equal to eval method.
• Don't use "with" statement. - Used to define the new scope of the element. It is more expensive to look up variables in other scope.

with(document.getElementById("divid").style){

color = '#fff';

width = '150px';

backgroundcolor ='#000′;

}

Javascript has better alternatives for this.

var divobj = document.getElementById("divid");

divobj.style.color = '#fff';

divobj.style.width = '150px';

divobj.style.backgroundcolor = '#000′;

• Cache offsetHeight/offsetWidth before using computation - Every time there is an internal re-flow happening

Re-flow happens at Initial page load, Browser window resize, Layout style changes, Add/Remove DOM nodes.

• Use innerHTML to insert the element into the node