Now Available!


Javascript Best Practices


Matt Kruse
October 10, 2005
Version 1.0


This document will explain some important Javascript concepts and show the preferred way of handling common situations and problems. It should be read by anyone developing web applications and using javascript.

Square Bracket Notation

Objects properties in javascript can be accessed in two ways: Dot notation and Square bracket notation.

Dot notation
Square bracket notation



This Will Work
This Will Not

For convenience and consistency, using square-bracket-notation instead of dot-notation is a good practice to get into.

Referencing Forms And Form Elements

The correct way to reference a form input element is:


All forms should have a name attribute. Referencing forms using indexes, such as document.forms[0] is bad practice.


var theform = document.forms["mainForm"];

Referencing Forms From Element Handlers

When you are validating an input field using onChange or similar event handlers, it is always a good idea to pass a reference to the input element itself into the function. Every input element has a reference to the form object that it is contained in.


function validate(input_obj) {
	// Reference another form element in the same form
	if (input_obj.form.elements["city"].value=="") { 

By passing a reference to the form element, and accessing its form property, you can write a function which does not contain a hard reference to any specific form name on the page.

Problems With Concatenation

In javascript, the + operator is used for both addition and concatenation. This can cause problems when adding up form field values, since Javascript is a non-typed language. Form field values will be treated as strings, and if you + them together, javascript will treat it as concatenation instead of addition.

Problematic Example

function total() {
	var theform = document.forms["myform"];

To fix this problem, Javascript needs a hint to tell it to treat the values as numbers, rather than strings. Subtracting 0 from the value is one way to force javascript to consider the value as a number, and then using the + operator on a number will perform addition, rather than concatenation.

Fixed Example #1
function total() {
	var theform = document.forms["myform"];
	var total = (theform.elements["val1"].value-0) + (theform.elements["val2"].value-0);
	alert(total); // This will alert 3

You can also use the unary + operator to convert the value into a number. Prefixing a variable or expression with + will force it to evaluate as a number, which can then be successfully used in a math operation. Sometimes this can look a little more confusing than subtracting 0, depending on your expression.

Fixed Example #2
function total() {
	var theform = document.forms["myform"];
	alert(total); // This will alert 3

Using onClick in <A> tags

When you want to trigger javascript code from an anchor tag, the onClick handler should be used. The javascript code that runs within the onClick handler needs to return true or false back to the tag itself. If it returns true, then the HREF of the anchor will be followed like a normal link. If it returns false, then the HREF will be ignored. This is why "return false;" is often included at the end of the code within an onClick handler.

Correct Syntax
<a href="javascript_required.html" onClick="doSomething(); return false;">go</a>


Sometimes, you want to conditionally follow a link. For example, if a user is navigating away from your form page and you first want to validate that nothing has changed. In this case, your onClick will call a function and it will return a value itself to say whether the link should be followed.

Conditional Link Following

function validate() {



What Not To Do


The eval() function in javascript is a way to run arbitrary code at run-time. In almost all cases, eval should never be used. If it exists in your page, there is almost always a more correct way to accomplish what you are doing. The rule is, "Eval is evil." Don't use it.

Detecting Browser Versions



Don't Use document.all



Only Use document.all As A Last Resort
if (document.getElementById) {
	var obj = document.getElementById("myId");
else if (document.all) {
	var obj = document.all("myId");

The rules for using document.all are

  1. Always try other standard methods first
  2. Only fall back to using document.all as a last resort
  3. Only use it if you need to support IE versions earlier than 5.0

Getting And Setting Form Values

The method used to get and set form values depends on the type of form element. A detailed explanation of how to correctly access form controls can be found at

In general, it is a good practice to use generalized getInputValue() and setInputValue() functions to read and write values to form elements. This will make sure that it is always done correctly, and situations that otherwise might cause confusion and errors are handled correctly. For example, forms with only 1 radio button in a group, or multiple text inputs with the same name, or multi-select elements.

The getInputValue() and setInputValue() functions are part of the validations.js library from the Javascript Toolbox. The most current version of these functions and other validation functions can be found at

Additional Resources

The comp.lang.javascript FAQ has many common questions and answers about javascript. It is a great resource to check if you have what you think might be a FAQ.

For general-purpose libraries and examples, see The Javascript Toolbox.

If you want to really exploit the javascript language and use advanced techniques, read about Javascript Closures.