Can anyone tell me why use one var declaration for multiple variables and declare each variable on a newline consider is a good programming behavior?

// bad
var items = getItems();
var goSportsTeam = true;
var dragonball = 'z';

// good
var items = getItems(),
    goSportsTeam = true,
    dragonball = 'z';

Can anyone tell me why use one var declaration for multiple variables and declare each variable on a newline consider is a good programming behavior?

// bad
var items = getItems();
var goSportsTeam = true;
var dragonball = 'z';

// good
var items = getItems(),
    goSportsTeam = true,
    dragonball = 'z';

• javascript

• 3 It's personal preference. – Blender Commented Apr 3, 2013 at 3:52
• It's just style, it makes no difference. – Barmar Commented Apr 3, 2013 at 3:53

4 Answers 4

It is not considered 'good' or 'bad'. It's a matter of preference.

The guy who built the code quality tool JSLint, Douglas Crockford likes it.

One 'advantage' it might have is that it avoids the possibility of variable hoisting. In JavaScript all var declarations move to the top of their scope automatically.

Here is why Crockford thinks the second option is better:

In languages with block scope, it is usually remended that variables be declared at the site of first use. But because JavaScript does not have block scope, it is wiser to declare all of a function's variables at the top of the function. It is remended that a single var statement be used per function. This can be declined with the vars option.

It's a preference, I wouldn't say good or bad. Yes JSLint plains about it, I don't really like how it plains about for loop variables being inline as well. The reason that it was put in JSLint was to prevent possible hoisting confusions.

Also in some cases declaring all of your variables at the top will lead to a slightly smaller file. Consider the following:

var a = 10;
a++;
var b = 20;

After Google Closure being run over it

var a=10;a++;var b=20;

As opposed to this if we pull b's declaration to the top.

var a=10,b;a++;b=20;

The main benefit (aside from style preference, I guess) is that it will prevent you from writing code that suffers from unintended variable hoisting consequences.

Take this example:

var foo = function(){alert('foo');}
function bar(){
  foo();
  var foo = function(){alert('foobar')};
  foo();
}
bar();

By reading this code, the intent of bar appears to be as follows:

1. Call the outer foo function to alert the string 'foo'.
2. Create a local variable, foo.
3. Call the local foo function to alert the string 'foobar'.

In reality, what happens is this:

1. The local variable foo is hoisted to the top of the bar function.
2. foo now actually refers to the local variable instead of the outer variable of the same name. But since the local hasn't been assigned yet, its value is undefined. Hence, when you try to invoke foo, you'll get a TypeError.
3. Nothing. Because you threw an error. That's it. Your code broke.

The arguments for Crockfords preference have been well made and are valid. I am just beginning to return to the first format now however, as I believe that for experienced developers who understand variable hoisting and are not likely to fall foul to it, there are 2 advantages that I can think of:

1. When new variables are added to the list of definitions, diffing is made easier. This means you are likely to experience fewer merge conflicts (simple though they may be to resolve) and less cognitive load when analysing diffs. For similar reasons I have also been converted to dangling mas, which I would never have expected xD

2. As @ldsenow identified, it can make searching for variable definitions more simple. You will always be able to search for var <name> and get the result you want and nothing else.