24 JavaScript Best Practices for Beginners

Jun 16th in Javascript & AJAX by Jeffrey Way

As a follow-up to "30 HTML and CSS Best Practices", this week, we'll review JavaScript! Once you've reviewed the list, be sure to let us know what little tips you've come across!

Author: Jeffrey Way

Hi,I'm Jeff. I'm the editor of Nettuts+, and the Site Manager of ThemeForest. I spend too much time in front of the computer and find myselftelling my fiance', "We'll go in 5 minutes!" far too often. I justcan't go out to dinner while I'm still producing FireBugerrors...drives me crazy. I love jQuery, PHP, MYSQL, CSS, AJAX - prettymuch anything. If it will keep you in the good graces of the church, follow us on Twitter.

1. Use === Instead of ==

JavaScript utilizes two different kinds of equality operators: === | !== and == | != It is considered best practice to always use the former set when comparing.

"If two operands are of the same type and value, then === produces true and !== produces false." - JavaScript: The Good Parts

However, when working with == and !=, you'll run into issues when working with different types. In these cases, they'll try to coerce the values, unsuccessfully.

2. Eval = Bad

For those unfamiliar, the "eval" function gives us access toJavaScript's compiler. Essentially, we can execute a string's result bypassing it as a parameter of "eval".

Not only will this decrease your script's performance substantially,but it also poses a huge security risk because it grants far too muchpower to the passed in text. Avoid it!

3. Don't Use Short-Hand

Technically, you can get away with omitting most curly braces andsemi-colons. Most browsers will correctly interpret the following:

view plaincopy to clipboardprint?

1. if(someVariableExists)  
2.    x = false  

if(someVariableExists)   x = false

However, consider this:

view plaincopy to clipboardprint?

1. if(someVariableExists)  
2.    x = false  
3.    anotherFunctionCall();  

if(someVariableExists)   x = false   anotherFunctionCall();

One might think that the code above would be equivalent to:

view plaincopy to clipboardprint?

1. if(someVariableExists) {  
2.    x = false;  
3.    anotherFunctionCall();  
4. }  

if(someVariableExists) {   x = false;   anotherFunctionCall();}

Unfortunately, he'd be wrong. In reality, it means:

view plaincopy to clipboardprint?

1. if(someVariableExists) {  
2.    x = false;  
3. }  
4. anotherFunctionCall();  

if(someVariableExists) {   x = false;}anotherFunctionCall();

As you'll notice, the indentation mimics the functionality of thecurly brace. Needless to say, this is a terrible practice that shouldbe avoided at all costs. The only time that curly braces should beomitted is with one-liners, and even this is a highly debated topic.

view plaincopy to clipboardprint?

1. if(2 + 2 === 4) return 'nicely done';  

if(2 + 2 === 4) return 'nicely done';

Always Consider the Future

What if, at a later date, you need to add more commands to this ifstatement. In order to do so, you would need to rewrite this block ofcode. Bottom line - tread with caution when omitting.

4. Utilize JS Lint

JSLint is a debugger written byDouglas Crockford. Simply paste in your script, and it'll quickly scanfor any noticeable issues and errors in your code.

"JSLint takes a JavaScript source and scans it. If it finds a problem,it returns a message describing the problem and an approximate locationwithin the source. The problem is not necessarily a syntax error,although it often is. JSLint looks at some style conventions as well asstructural problems. It does not prove that your program is correct. Itjust provides another set of eyes to help spot problems."
- JSLint Documentation

Before signing off on a script, run it through JSLint just to be sure that you haven't made any mindless mistakes.

5. Place Scripts at the Bottom of Your Page

This tip has already been recommended in the previous article inthis series. As it's highly appropriate though, I'll paste in theinformation.

Remember -- the primary goal is to make the page load as quickly aspossible for the user. When loading a script, the browser can'tcontinue on until the entire file has been loaded. Thus, the user willhave to wait longer before noticing any progress.

If you have JS files whose only purpose is to add functionality -- forexample, after a button is clicked -- go ahead and place those files atthe bottom, just before the closing body tag. This is absolutely a bestpractice.

Better

view plaincopy to clipboardprint?

1. <p>And now you know my favorite kinds of corn. </p>  
2. <script type="text/javascript" src="path/to/file.js"></script>  
3. <script type="text/javascript" src="path/to/anotherFile.js"></script>  
4. </body>  
5. </html>  

<p>And now you know my favorite kinds of corn. </p><script type="text/javascript" src="path/to/file.js"></script><script type="text/javascript" src="path/to/anotherFile.js"></script></body></html>

6. Declare Variables Outside of the For Statement

When executing lengthy "for" statements, don't make the engine work any harder than it must. For example:

Bad

view plaincopy to clipboardprint?

1. for(var i = 0; i < someArray.length; i++) {  
2.    var container = document.getElementById('container');  
3.    container.innerHtml += 'my number: ' + i;  
4.    console.log(i);  
5. }  

for(var i = 0; i < someArray.length; i++) {   var container = document.getElementById('container');   container.innerHtml += 'my number: ' + i;   console.log(i);}

Notice how we must determine the length of the array for eachiteration, and how we traverse the dom to find the "container" elementeach time -- highly inefficient!

Better

view plaincopy to clipboardprint?

1. var container = document.getElementById('container');  
2. for(var i = 0, len = someArray.length; i < len;  i++) {  
3.    container.innerHtml += 'my number: ' + i;  
4.    console.log(i);  
5. }  

var container = document.getElementById('container');for(var i = 0, len = someArray.length; i < len;  i++) {   container.innerHtml += 'my number: ' + i;   console.log(i);}

Bonus points to the person who leaves a comment showing us how we can further improve the code block above.

7. The Fastest Way to Build a String

Don't always reach for your handy-dandy "for" statement when youneed to loop through an array or object. Be creative and find thequickest solution for the job at hand.

view plaincopy to clipboardprint?

1. var arr = ['item 1', 'item 2', 'item 3', ...];  
2. var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';  

var arr = ['item 1', 'item 2', 'item 3', ...];var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

I won’t bore you with benchmarks; you’ll just have to believe me (or test for yourself) - this is by far the fastest method!

Using native methods (like join()), regardless of what’s goingon behind the abstraction layer, is usually much faster than anynon-native alternative.
- James Padolsey, james.padolsey.com

8. Reduce Globals

"By reducing your global footprint to a single name, you significantlyreduce the chance of bad interactions with other applications, widgets,or libraries."
- Douglas Crockford

view plaincopy to clipboardprint?

1. var name = 'Jeffrey';  
2. var lastName = 'Way';  
3.   
4. function doSomething() {...}  
5.   
6. console.log(name); // Jeffrey -- or window.name  

var name = 'Jeffrey';var lastName = 'Way';function doSomething() {...}console.log(name); // Jeffrey -- or window.name

Better

view plaincopy to clipboardprint?

1. var DudeNameSpace = {  
2.    name : 'Jeffrey',  
3.    lastName : 'Way',  
4.    doSomething : function() {...}  
5. }  
6. console.log(DudeNameSpace.name); // Jeffrey  

var DudeNameSpace = {   name : 'Jeffrey',   lastName : 'Way',   doSomething : function() {...}}console.log(DudeNameSpace.name); // Jeffrey

Notice how we've "reduced our footprint" to just the ridiculously named "DudeNameSpace" object.

9. Comment Your Code

It might seem unnecessary at first, but trust me, you WANT to commentyour code as best as possible. What happens when you return to theproject months later, only to find that you can't easily remember whatyour line of thinking was. Or, what if one of your colleagues needs torevise your code? Always, always comment important sections of yourcode.

view plaincopy to clipboardprint?

1. // Cycle through array and echo out each name.   
2. for(var i = 0, len = array.length; i < len; i++) {  
3.    console.log(array[i]);  
4. }  

// Cycle through array and echo out each name. for(var i = 0, len = array.length; i < len; i++) {   console.log(array[i]);}

10. Embrace Progressive Enhancement

Always compensate for when JavaScript is disabled. It might be temptingto think, "The majority of my viewers have JavaScript enabled, so Iwon't worry about it." However, this would be a huge mistake.

Have you taken a moment to view your beautiful slider with JavaScript turned off? (Downloadthe Web Developer Toolbar for an easy way to do so.) It might breakyour site completely. As a rule of thumb, design your site assumingthat JavaScript will be disabled. Then, once you've done so, begin to progressively enhance your layout!

11. Don't Pass a String to "SetInterval" or "SetTimeOut"

Consider the following code:

view plaincopy to clipboardprint?

1. setInterval(  
2. "document.getElementById('container').innerHTML += 'My new number: ' + i", 3000  
3. );  

setInterval("document.getElementById('container').innerHTML += 'My new number: ' + i", 3000);

Not only is this code inefficient, but it also functions in the same way as the "eval" function would. Never pass a string to SetInterval and SetTimeOut. Instead, pass a function name.

1. setInterval(someFunction, 3000);  

setInterval(someFunction, 3000);

12. Don't Use the "With" Statement

At first glance, "With" statements seem like a smart idea. The basicconcept is that they can be used to provide a shorthand for accessingdeeply nested objects. For example...

view plaincopy to clipboardprint?

1. with (being.person.man.bodyparts) {  
2.    arms = true;  
3.    legs = true;  
4. }  

with (being.person.man.bodyparts) {   arms = true;   legs = true;}

-- instead of --

view plaincopy to clipboardprint?

1. being.person.man.bodyparts.arms = true;  
2. being.person.man.bodyparts.legs= true;  

being.person.man.bodyparts.arms = true;being.person.man.bodyparts.legs= true;

Unfortunately, after some testing, it was found that they "behavevery badly when setting new members." Instead, you should use var.

view plaincopy to clipboardprint?

1. var o = being.person.man.bodyparts;  
2. o.arms = true;  
3. o.legs = true;  

var o = being.person.man.bodyparts;o.arms = true;o.legs = true;

13. Use {} Instead of New Object()

There are multiple ways to create objects in JavaScript. Perhaps themore traditional method is to use the "new" constructor, like so:

view plaincopy to clipboardprint?

1. var o = new Object();  
2. o.name = 'Jeffrey';  
3. o.lastName = 'Way';  
4. o.someFunction = function() {  
5.    console.log(this.name);  
6. }  

var o = new Object();o.name = 'Jeffrey';o.lastName = 'Way';o.someFunction = function() {   console.log(this.name);}

However, this method receives the "bad practice" stamp without actuallybeing so. Instead, I recommend that you use the much more robust objectliteral method.

Better

view plaincopy to clipboardprint?

1. var o = {  
2.    name: 'Jeffrey',  
3.    lastName = 'Way',  
4.    someFunction : function() {  
5.       console.log(this.name);  
6.    }  
7. };  

var o = {   name: 'Jeffrey',   lastName = 'Way',   someFunction : function() {      console.log(this.name);   }};

Note that if you simply want to create an empty object, {} will do the trick.

view plaincopy to clipboardprint?

1. var o = {};  

var o = {};

"Objects literals enable us to write code that supports lots offeatures yet still make it a relatively straightforward for theimplementers of our code. No need to invoke constructors directly ormaintain the correct order of arguments passed to functions, etc." - dyn-web.com

14. Use [] Instead of New Array()

The same applies for creating a new array.

Okay

view plaincopy to clipboardprint?

1. var a = new Array();  
2. a[0] = "Joe";  
3. a[1] = 'Plumber';  

var a = new Array();a[0] = "Joe";a[1] = 'Plumber';

Better

view plaincopy to clipboardprint?

1. var a = ['Joe','Plumber'];  

var a = ['Joe','Plumber'];

"A common error in JavaScript programs is to use an object when anarray is required or an array when an object is required. The rule issimple: when the property names are small sequential integers, youshould use an array. Otherwise, use an object." - Douglas Crockford

15. Long List of Variables? Omit the "Var" Keyword and Use Commas Instead

view plaincopy to clipboardprint?

1. var someItem = 'some string';  
2. var anotherItem = 'another string';  
3. var oneMoreItem = 'one more string';  

var someItem = 'some string';var anotherItem = 'another string';var oneMoreItem = 'one more string';

Better

view plaincopy to clipboardprint?

1. var someItem = 'some string',  
2.     anotherItem = 'another string',  
3.     oneMoreItem = 'one more string';  

var someItem = 'some string',    anotherItem = 'another string',    oneMoreItem = 'one more string';

...Should be rather self-explanatory. I doubt there's any real speed improvements here, but it cleans up your code a bit.

17. Always, Always Use Semicolons

Technically, most browsers will allow you to get away with omitting semi-colons.

view plaincopy to clipboardprint?

1. var someItem = 'some string'  
2. function doSomething() {  
3.   return 'something'  
4. }  

var someItem = 'some string'function doSomething() {  return 'something'}

Having said that, this is a very bad practice that can potentially lead to much bigger, and harder to find, issues.

Better

view plaincopy to clipboardprint?

1. var someItem = 'some string';  
2. function doSomething() {  
3.   return 'something';  
4. }  

var someItem = 'some string';function doSomething() {  return 'something';}

18. "For in" Statements

When looping through items in an object, you might find that you'llalso retrieve method functions as well. In order to work around this,always wrap your code in an if statement which filters the information

view plaincopy to clipboardprint?

1. for(key in object) {  
2.    if(object.hasOwnProperty(key) {  
3.       ...then do something...  
4.    }  
5. }  

for(key in object) {   if(object.hasOwnProperty(key) {      ...then do something...   }}

As referenced from JavaScript: The Good Parts, by Douglas Crockford.

19. Use Firebug's "Timer" Feature to Optimize Your Code

Need a quick and easy way to determine how long an operation takes? Use Firebug's "timer" feature to log the results.

view plaincopy to clipboardprint?

1. function TimeTracker(){  
2.  console.time("MyTimer");  
3.  for(x=5000; x > 0; x--){}  
4.  console.timeEnd("MyTimer");  
5. }  

function TimeTracker(){ console.time("MyTimer"); for(x=5000; x > 0; x--){} console.timeEnd("MyTimer");}

20. Read, Read, Read...

While I'm a huge fan of web development blogs (like this one!),there really isn't a substitute for a book when grabbing some lunch, orjust before you go to bed. Always keep a web development book on yourbedside table. Here are some of my JavaScript favorites.

• Object-Oriented JavaScript
• JavaScript: The Good Parts
• Learning jQuery 1.3
• Learning JavaScript

Read them...multiple times. I still do!

21. Self-Executing Functions

Rather than calling a function, it's quite simple to make a functionrun automatically when a page loads, or a parent function is called.Simply wrap your function in parenthesis, and then append an additionalset, which essentially calls the function.

view plaincopy to clipboardprint?

1. (function doSomething() {  
2.    return {  
3.       name: 'jeff',  
4.       lastName: 'way'  
5.    };  
6. })();  

(function doSomething() {   return {      name: 'jeff',      lastName: 'way'   };})();

22. Raw JavaScript Can Always Be Quicker Than Using a Library

JavaScript libraries, such as jQuery and Mootools, can save you anenormous amount of time when coding -- especially with AJAX operations.Having said that, always keep in mind that a library can never be asfast as raw JavaScript (assuming you code correctly).

jQuery's "each" method is great for looping, but using a native "for" statement will always be an ounce quicker.

23. Crockford's JSON.Parse

Although JavaScript 2 should have a built-in JSON parser, as of thiswriting, we still need to implement our own. Douglas Crockford, thecreator of JSON, has already created a parser that you can use. It canbe downloaded HERE.

Simply by importing the script, you'll gain access to a new JSON globalobject, which can then be used to parse your .json file.

view plaincopy to clipboardprint?

1. var response = JSON.parse(xhr.responseText);  
2.   
3. var container = document.getElementById('container');  
4. for(var i = 0, len = response.length; i < len; i++) {  
5.   container.innerHTML += '<li>' + response[i].name + ' : ' + response[i].email + '</li>';  
6. }  

 var response = JSON.parse(xhr.responseText); var container = document.getElementById('container'); for(var i = 0, len = response.length; i < len; i++) {   container.innerHTML += '
' + response[i].name + ' : ' + response[i].email + '
'; }

24. Remove "Language"

Years ago, it wasn't uncommon to find the "language" attribute within script tags.

view plaincopy to clipboardprint?

1. <script type="text/javascript" language="javascript">  
2. ...  
3. </script>  

<script type="text/javascript" language="javascript">...</script>

However, this attribute has long since been deprecated; so leave it out.

That's All, Folks

So there you have it; twenty-four essential tips for beginning JavaScripters. Let me know your quick tips! Thanks for reading. What subject should the third part in this series cover?

• Follow us on Twitter, or subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.