Good Javascript Practices Some I understand, some I dont

[FirefoxRocks 0]

JavaScript is a very lenient language. It allows you to use variables without declaring/initializing them first. Even though it is object orientated, quite a few JavaScript programmers do not know about the object orientated aspect of JavaScript (this includes me). Furthermore, JavaScript is used in almost all browser-based applications. It is muscle to power the page (the skin and bones are CSS and HTML).

 

1. Avoid global variables

 

One of the biggest problems in JavaScript is global variables. They may be convenient, but once you have 50 functions defined, you will find them to be harmful. Since they can be accessed by any function, they can potentially cause problems by interfering (colliding/overriding each other). Read more about it at Yahoo! Developer Blog.

 

Now I'm not saying that you must not use global variables, but do avoid them. I still haven't found a way to get rid of all globals because they are essential sometimes (or maybe I'm not that good at JavaScript yet).

 

2. Declare variables before you use them. And functions too

 

This one is obvious. If you haven't declared them, the JavaScript parser will not know what they are. This goes for functions too. If you need to call a function within a function, don't write it afterwards, write it before, so here is an example:

function def(number) {[tab][/tab]   // do some stuff[tab][/tab]  return true;   }      function  abc() {[tab][/tab]  document.write(def(i));[tab][/tab]   }

In the previous example, declare def() before abc() because you will be using it in abc().

 

3. Use semicolons.

 

JavaScript allows you to omit semicolons at the end of statements. Not a good idea. It is good practice to use semicolons because they are required in PHP, C, etc. This is easy. End each statement with a semicolon, this includes function calls and variable declarations. The only exception to this is function declarations, and if/for/while/switch statements.

 

4. Comma usage

 

Use commas as a separator only (and of course in strings). Also, omit the last comma in a group of stuff in arrays, objects, etc. as the extra comma will likely cause problems in Internet Explorer and/or other interpreters.

var cars = new  Array("Dodge Ram", "Ford Mustang", "Toyota  Yaris");   // note that there is no comma after the last  item

5. If you can, use only 1 var statement per function.

 

This one was tricky at first, but now I'm getting the hang of it. Maybe it's to save space, maybe it's for some other reason. Instead of writing this:

function doSomething() {[tab][/tab]   var i = 0;[tab][/tab]  var j = 5;[tab][/tab]  var k = 61;[tab][/tab]   // some stuff....   }

You can do this instead:

function doSomething() {[tab][/tab]  var i = 0,  j = 5, k = 61;[tab][/tab]  // some stuff...   }

6. Encapsulate blocks with { and } even if they are 1 line.

 

You may see if statements do this (and maybe even while and for):

if(x!==3) return false;

At first you may see that it returns false, but in a long line of code it may not be obvious. Use the curly braces each time:

if(x!==3) { return  false; }

It prevents mistake if you are adding code later on.

 

7. Do not declare function arguments again in the function as variables.

 

Don't do this:

function showMe(blocks)  {[tab][/tab]  var blocks = "...";   }

It is unnecessary and can produce unexpected results.

Also, make sure that variables are only declared once. You can set a null value to them if you wish.

Another note to add here is that variables should be declared at the top of the function, not within the if/else/for/while statements, unless you are only using them within that block.

 

8. if(a = ... we aren't assigning a to be equal to b

It is likely that in the above statement, we are comparing a and b. Use the == operator to compare values. This goes for while and for statements as well.

 

9. Use === to compare instead of ==

 

=== compares the type also, to further increase security and to reduce errors.

 

"0"===0 returns false, but "0"==0 will return true. Strings are not integers (numbers).

 

10. Avoid ++ and --

 

Now this is one that I don't understand. Apparently it is a security issue to use ++ and -- increment operators. It is however easy to fix: i++ just becomes i=i+1.

 

11. new Array() isn't efficient

 

Instead of writing:

 

var cars = new Array("Dodge  Ram", "Ford Mustang", "Toyota Yaris");

Write this instead:

var cars = ["Dodge Ram",  "Ford Mustang", "Toyota Yaris"];

This is also less typing

 

12. with and eval statements are evil

 

I'm not going into further detail here. With statements make code hard to understand when you are revising it. Eval is probably the result of bad coding or beginner's programming (it is very conveinient, maybe too conveinient).

 

So there are 12 tips to writing better JavaScript. I have applied almost all of them to my code, it is so much better now! To validate your JavaScript code, use JSLint. Click on "The Good Parts". Also, more information can be found here: http://forums.xisto.com/no_longer_exists/

Edited August 13, 2009 by FirefoxRocks (see edit history)