Stop It With the Vars

If there's one thing that is a greater sign of laziness (or incompetence (or ignorance)) in Javascript, it is the constant declaration of variables in functions. What I mean is this:

function terribleFunc() { 
     var x = 0;
     var y = 1;

     for (var i = 0; i < 10; i++) {
         var num = x + i;
         var total  = num + y * x;
         y *= i;
     }

     var data = {
         prop1: x
         , prop2: y
     }

     return data;
}

Don't worry about what the function does, I'm sure it actually does nothing. I see this all the time in demo code or repo code for plugins or libraries around the web. The point is, you don't ever need more than one var statement in any function scope. Rewritten, terribleFunc() should look something like this (again, don't worry about what it does, focus on the structure):

function terribleFunc() { 
     var x = 0 //variables with value declarations
         , y = 1
         , i, num, total, data //variables without value declarations
     ;

     for (i = 0; i < 10; i++) {
         num = x + i;
         total  = num + y * x;
         y *= i;
     }

     data = {
         prop1: x
         , prop2: y
     }

     return data;
}

Notice how I pulled all the variables out and to the top of the function. If you've read the revered "Code Complete" you know that it says that you should declare variables as close as you can to their usage. This is absolutely correct... for all languages except Javascript. Because of hoisting, the Javascript interpreter restructures your code like the second example anyways, so it's better to have everything how it will be at runtime so you know exactly what's going on in your code.

One thing novice Javascript programmers err on is thinking that loop control structures (for, while, etc.) have variable scope; they do not. If you declare a variable inside a loop, it gets hoisted out at runtime, meaning you could have some issues with your variable values.

Also notice how I declared all of my variables using one var statement. While you may not agree with my comma-first notation, the overall structure is much cleaner, as multiple var statements are not only unnecessary but they add more bytes to what gets sent over the wire on download. The latter may not seem like a big deal for small projects, but if you're using a var declaration for every variable declaration in a big file, those bytes add up.

tl;dr

When declaring a variable in a Javascript function, put it in a list with one var declaration at the top to avoid errors and to keep your function clean.