JavaScript code conventions - variable declaration

问题:

What's the less error prone approach to declare variables in JavaScript?

var a;
var b;
var c;

or

var a,
    b,
    c;

jQuery and Dojo use the second approach and personally that's my favorite in terms of code legibility, the problem is that I find it harder to debug.

Example 1:

var a,
    b,
    c; // oops.. semicolon instead of comma
    d,
    e;

Example 2:

When searching for a certain variable in the project, var stands out better that the variable is being declared.

EDIT: The original examples were wrong, i've made a mistake when copying and pasting. The code is already updated, sorry for the incovenient.

回答1:

Multiple variable declarations (rather than combined) are less error prone, for the reasons you mentioned. However, combined declarations have some other advantages:

• JSLint and possibly other linters will complain about multiple var keywords per scope.
• A single var keyword minifies better than many, for obvious reasons.
• Combining declarations forces you to declare the variables in one place, probably close to the beginning of the function they reside in, which is considered good practice.

On the flipside, as you mentioned mistakes can be made with combined variable declarations, and they can be awkwardly represented in a diff.

As long as you keep a consistent style of variable declaration throughout the project, the style you choose should not really matter.

回答2:

I prefer your second approach of using just one var keyword. Recently I have taken it a step further and instantiate types onto each variable to help me prevent unintended type recasting later. An example is:

var a = 0,
    b = 0,
    c = {},
    d = [],
    f = "";

I supply an actual value here if I have a value to supply at this point. If not I supply the following dummy values:

• 0 for number types
• [] for array
• {} for object literal and DOM nodes
• "" for string
• function () {return;} for functions
• false for boolean
• for this purpose I don't worry about pre-assigning types for Math, Date, or RegExp types.

回答3:

var a;
var b;
var c;

is the better approach because it will not throw undefined error. Also variables will be scoped properly & not in global scope.

var a=10;
    b=5;

would result b in global scope.

EDIT: This was in context with the sample posted originally https://stackoverflow.com/revisions/9746359/2. With the updated Context, it comes down to more of individual preference. My recommendation will be to give no room for those kind of mistakes as its hard to find them.

回答4:

The second option is better in my book, as it's less redundant. Modern browsers and IDEs make it pretty easy to find a bug like you called out.

Here's a jsFiddle that shows what happens. Accidentally inserting a semicolon in the series causes an Uncaught ReferenceError. It's a quick fix and a small tradeoff for a nicer syntax. If this is the worst bug you have to deal with when writing JavaScript, you're having a great day.

Ironically, you had a typo in your second example--semicolon after a. Whoops. :)

EDIT: Original poster fixed typo; I'm leaving the mention in because it's relevant to the original question.

回答5:

There is one bonus to having the multiple declaration of a variable using 1 var.

You get to have lower minified script. Obviously the 4 bytes required to have a var declaration does not make much of a difference until your a place like stackoverflow.com. Millions upon millions of download == gigs of transfer just based on a few extra var declarations.