Vishful thinking…

Writing better javascript – Part 3

Posted in javascript by viswaug on November 18, 2008

Writing AJAX applications involves a lot of scenarios where the data sent from the server to the browser needs to be inserted into the web page as appropriate HTML elements. When using JavaScript to dynamically inject contents into your HTML page, it is better to use the ‘innerHTML’ property of the DOM element and injecting all the contents as a string into the HTML page. This method even though seemingly ugly is faster than using DOM manipulation methods on the document object like ‘document.createElement(…)’ and ‘element.appendChild(…)’ etc to insert dynamic contents.

Check out the benchmarks on the performance benefits of using the ‘innerHTML’ property over the DOM manipulation methods here at QuirksMode. If you are a bigger stickler for performance and the gains from using ‘innerHTML’ doesn’t satisfy you, then you might consider using the ‘replaceHTML’ function below as per the suggestions posted here.

function replaceHtml(el, html) {
	var oldEl = typeof el === "string" ? document.getElementById(el) : el;
	/*@cc_on // Pure innerHTML is slightly faster in IE
		oldEl.innerHTML = html;
		return oldEl;
	@*/
	var newEl = oldEl.cloneNode(false);
	newEl.innerHTML = html;
	oldEl.parentNode.replaceChild(newEl, oldEl);
	/* Since we just removed the old element from the DOM, return a reference
	to the new element, which can be used to restore variable references. */
	return newEl;
};

Writing better javascript – Part 2

Posted in javascript by viswaug on November 18, 2008

If you find yourself writing code like below often enough

if(!test)
{
test = new Array();
}

then you might be able to delay the onset of carpal tunnel by using the syntax below.

test = test || new Array();

The ‘||’ can be used kind of like the null coalescing operator for JavaScript. The above syntax will come in real handy when you want to set some default values for optional arguments in JavaScript functions.

Update: watch out when using the above syntax for assigning default values for boolean and number argument types. Even though false and 0 are valid arguments, they will still evaluate to falsey and end up taking the default value.

Writing better javascript – Part 1

Posted in javascript by viswaug on November 18, 2008

Since I have taken a deep dive into the world of JavaScript programming for a while now, I thought I would start a series of posts with some of the lessons learnt and some good JavaScript programming practices I follow to make my life easier. Here goes the first post …

Always use the “===” operator over the “==” operator unless you explicitly want to.

The difference between the “===” operator and “==” operator is that the “===” makes sure that the types of the values you are comparing are also equal whereas the “==” operator doesn’t. Well, what does that really mean? Well, take the example below

var test = “3”; //the variable test contains the string “3”
if(test === 3) {    alert(“‘===’ evaluated to true.”);}
if(test == 3) {    alert(“‘==’ evaluated to true.”);}

In this case “test === 3” comparison will evaluate to false because the variable ‘test’ contains the string ‘3’ and it is being compared to the number 3. Whereas “test == 3” comparison will evaluate to true because the ‘==’ operator ignores the types of the values being compared.

In most cases, you will want to do a ‘===’ comparison and not the ‘==’ comparison. Getting into the habit of always using the ‘===’ operator will help to avoid certain error conditions which are normally hard to locate and debug.