A function, JavaScript engine and the single var pattern to declare variables walk into a pub

Addy Osmani had published a very nice post that summarizes various problems found when doing JavaScript code review. Most of the points there worth paying attention to. However, there is one point there that he got completely wrong. When he discussed the problem of variables declared all over the place within a function scope, he suggested to use the "single var pattern to declare variables", basically write the variables declarations like this:

var someData = "testing",
     otherData = "data1",
     moreData = "data2";

This kind of coding will get you into trouble. Try to find the difference between the code above and the code below:


var someData = "testing"
     otherData = "data1",
     moreData = "data2";

Found?

let's add to the first snippet the scope of each variable:

var someData = "testing", // local within the function
     otherData = "data1", // local within the function
     moreData = "data2"; // local within the function

Now let's do the same for the second snippet:

var someData = "testing" // local within the function
     otherData = "data1", // global
     moreData = "data2"; // global

Big difference, but why?.

Answer: Take a look at the "testing" string. In the first snippet  it is followed by a comma, whereas it is not there in the second snippet. That's all, one comma.

Both snippets are valid JavaScript code, it just happens that even though JavaScript has a C like syntax, it does not require to have a semi-colon at the end of each line, the JavaScript engine will add it if missing.

So the second snippet is actually:


var someData = "testing"; // local within the function
     otherData = "data1", // global
     moreData = "data2"; // global

(note the semi-colon after the "testing").

One more thing to know about JavaScript: when declaring a variable inside a function without the var keyword, it is defined as a global variable.

Now go and find that little comma somewhere in your code, at 1:00 am , a few hours before delivery.

I prefer the simpler approach to define variables, and do the following:


var someData = "testing"; // local within the function
var otherData = "data1"; // local within the function
var moreData = "data2"; // local within the function

You can say that it is less elegant, but it is much less error prone, much more descriptive of what you want, can save hours of looking for a comma and simply put, it is just a simpler code. Just remember that beauty is in the eyes of the beholder, and to me, in code, simplicity is beauty .