7 Javascript Best Practices I Have Learned

In a previous post I listed three books that have been great resources for learning JavaScript.  Here are seven important things I have learned so far in no particular order:

Global variables can quickly become a major design problem in JavaScript.  As a C# developer, at first glance I would assume this code would result in a global object with two private members:

1. var MyModule = (function () {
2.     myPrivateProperty = 1;
3.     myPrivateFunction = function () {
4.         alert('private');
5.     };
6. } ());

In reality, myPrivateProperty and myPrivateFunction both are global variables.  This code properly declares both variables as private:

1. var MyModule = (function () {
2.     var myPrivateProperty = 1;
3.     var myPrivateFunction = function () {
4.         alert('private');
5.     };
6. } ());

There are style conventions to follow in JavaScript.  The ones I list here come from the JavaScript Patterns book by Stoyan Stefanov.

• Use consistent indentation (typically 4 spaces) to make your code readable.
• Put the opening curly bracket on the same line as the previous statement to avoid unexpected behavior from implied semicolons.
• Capitalize constructors using TitleCase, variables and functions using camelCase (or lower_case for variables to make it easier to distinguish from functions), private variables and functions using an opening underscore (e.g., _camelCase), and use all caps for CONSTANT_VALUES.

Comment your code using an API documentation format.  This will allow for auto-generation of code documentation.  I have adopted the YUIDoc tool conventions.

For loops must be coded carefully for maximum efficiency.  As a C# developer, the following code looked good to me:

1. function forLoopExample() {
2.     var item;
3.     var anArray = document.getElementsByClassName('my_class');
4.     for (i = 0; i < anArray.length; i++) {
5.         alert(item = anArray[i]);
6.     }
7. }

In reality there are several problems with this design:

• The i variable is an implied global
• The for loop queries the live DOM on every pass because it checks the element collection's length repeatedly
• The use of ++ promotes "excessive trickiness"

Here is a much-improved design:

1. function forLoopExample() {
2.     var item, i, max;
3.     var anArray = document.getElementsByClassName('my_class');
4.     for (i = 0, max = anArray.length; i < max; i += 1) {
5.         alert(item = anArray[i]);
6.     }
7. }

Eval is evil.  The Javascript eval function is a security risk because it grants too much authority to the evaluated string.  A better approach is to use Douglas Crockford's JSON library to evaluate text with JSON.parse() or by using the jQuery.parseJSON() method.

Minify production JavaScript using a tool like Douglas Crockford's JSMin or an online YUICompressor which removes whitespace, comments, etc. thereby significantly reducing the size of your JavaScript file.

Check your JavaScript code using JSLint which is a code quality tool that checks for many common violations such as implied globals, missing semi-colons, unused variables, unreachable code, and many more.