Multiple var statements in JavaScript

Writing a single var declaration per function is considered to be good for readability and maintainability.

But, when I went through some of standard libraries, their dev version doesn’t strictly follow this. For example, Underscore code has multiple var statements in many function which are spread randomly and declared as required.

Is there any reason to not to follow the single-var-rule?

This is mostly a matter of personal preference and taste, and which coding style you are using (NPM, jQuery, Idiomatic.js, etc.), since there are valid arguments both for and against multiple var statements.

Oleg mentioned commenting. If you use a single statement, comments will break up the code in a way that may reduce readability. Indenting of comments may look strange (not aligned) depending on how you indent, but you could always do something like this:

var
  // This variable does this
  variableOne = 1,

  // This variable does that.
  variableTwo = 2

Oleg also mentions JSDoc commenting, which may break things up further:

var
  /**
   * This variable does this.
   * 
   * @private
   */
  variableOne = 1,

  /**
   * Object containing preferences for X. Access by calling
   * the public API method Y or whatnot.
   *
   * @private
   * @example
   * . . .
   *
   * @property {Object} preferences A can of fresh preferences
   * @property {Boolean} preferences.optionA Enable something
   * @property {Boolean} preferences.optionB Disable something
   * @property {String} preferences.optionC Name something
   */
  preferences = applyPreferencesToDefaults(userPreferences, {
    optionA: false,
    optionB: true,
    optionC: 'Hello'
  })

Another argument for using multiple statements is that it’s slightly easier to move them around, and there’s less risk of comma or semicolon related problems (such as accidentally leaving one out when moving a line).

NPM advocates the comma-first (and semicolon-less) style to avoid such issues (which incidentally also aligns declarations neatly—if you use two spaces):

var variableOne = 'one'
  , variableTwo = 'two'
  , variableThree = 'three'

Arguments for using a single var statement include: it looks better/simpler/cleaner; it’s less typing, it’s how JavaScript hoisting works; it forces you to declare at the top; Crockford says you’re an idiot if you don’t; it’s a religion and/or cult more opinionated than Satan’s.

In the end, the most important argument works just as well for either side: consistency.

If you use a consistent style, which you should, then it doesn’t really matter if there’s a var on each line or a comma on the left. It’s important not to get religious about these things. Besides, a decent minifier will mangle the code own to the same one-liner either way.

I personally prefer multiple var statements simply because I like to neatly comment my variables, but I’m perfectly fine with either way.

Now, if we could all just agree that both styles work and that consistency is way more important than the actual choice—what a wonderful world that would be. Heck, can’t it just be fun to switch it up once in a while?

This post by Ben Alman goes through it all in more detail, with more examples. The comments are, of course, also very interesting.

Update

I just read something else interesting, by Isaac of NPM:

Two var statements gzip better than a single var with a comma.

It’s from a comment to this Gist, in which Isaac explains why he chooses comma-first for NPM. The comments are very interesting.

JavaScript allows both the single and multiple var declarations in any given scope. However, behind the scenes it actually converts them into a single declaration by hoisting variables to the top of the scope.

The flexibility of the language in this sense allows for different styles. You can choose whatever you like, and many developers do so.

For example, if you use jsdoc and would like to write per-variable comments, then I personnaly think that multiple var statements are a way to go, otherwise lengthy comments would make it look like you’re declaring global variables:

/**
 * something about a
 */
var a = 'a',

    /**
     * something about b
     */
    b = 'b'; // <-- it looks like b is in global scope here

But to enforce discipline and make code more understandable and readable – use single var statement and lint code with JSLint or JSHint.

Filed under: softwareengineering - @ 10:59

Thẻ: javascript

Thiết kế website giá rẻ

Danh mục

Multiple var statements in JavaScript

Update