Disadvantages of Javascript "single var pattern"

Question

In Stefanov's JS Design Patterns book, he writes "you use one var statement and declare multiple variables delimited by commas", and then gives an example of the "single var" pattern as follows:

function func() {
    var a = 1,
        b = 2,
        sum = a + b,
        myobject = {},
        i,
        j;

Stefanov additionally writes:

• "It’s a good practice to also initialize the variable with an initial value at the time you declare it."
• "You can also do some actual work at the time of the declaration, like the case with sum = a + b in the preceding code."

Now I have some code as follows, declaring the same number of variables with the single var pattern, but doing quite a bit more "actual work at the time of the declaration":

var html = '{purchaseQty}<br>FR:&nbsp; {fromLoc}'
    ,tpl = new Ext.XTemplate(html)
    ,srcReqLoc = record.get('SRC_REQUEST_LOC').trim()
    ,srcSupLoc = record.get('SRC_SUP_LOC').trim()
    ,fromLoc = srcReqLoc ? srcReqLoc : srcSupLoc
    ,tplCfg = {
        purchaseQty: purchaseQty
        ,fromLoc: fromLoc
    };

What are the disadvantages of doing too much "actual work at the time of the declaration"? BTW I don't consider this an exact duplicate of Javascript single var pattern. Am I overloading it? because I am asking about general disadvantages, rather than what might be wrong with just my code.

I think I can see that a general disadvantage would be inability to check errors, for instance where in my example I call trim() on strings expected back from record.get, but if undefined is returned instead, the "can't call method on undefined object" (or whatever it is ;) will be thrown. Can anybody think of anything else?

Answer 1

I personally side with Douglas Crockford (although I appreciate those that don't on this), that declaring vars at the top of a function makes most sense because JavaScript doesn't have block scope.

From the JSLint site:

In languages with block scope, it is usually recommended 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 recommended that a single var statement be used per function.

The only disadvantage is that your code will be less readable to someone coming from a C, or C-based background.

I'm wary that I might sound like a Crockford fanboy here, but I'd recommend this talk on coding style and why sometimes your brain should rule your heart with code structure (depending on the language).

Answer 2

It makes sense to declare all the variables at the top of the scope, i.e., at the beginning of a function or the beginning of global code. I agree with that.

As far as providing initial values at the time of declaration, I take that as more of a guideline. In general it is a good plan, and certainly works for simple values, but sometimes the initial value isn't known until after some more complicated calculations - in which case I would not provide a default that never gets used just for the sake of providing some value. And sometimes it just gets too messy.

Also I would not give loop index variables an initial value at the time of declaration - for me it is much clearer to assign the value at the beginning of the loop.

As you've already pointed out, if you need to handle exceptions and so forth you'll need to do that later in the function too.

Just use some common sense: if you have a lot of variables you may find your var statement gets a bit unreadable, so then you can move some of the initialisation to later in the function.

For me your example code is OK, but if you needed to add much more to it it would get a bit hard to read because with that much code in a dense block I can't pick out the variable names as easily, but - and this is, obviously, a matter of taste - you can add some whitespace:

var html       = '{purchaseQty}<br>FR:&nbsp; {fromLoc}'
    ,tpl       = new Ext.XTemplate(html)

    ,srcReqLoc = record.get('SRC_REQUEST_LOC').trim()
    ,srcSupLoc = record.get('SRC_SUP_LOC').trim()    
    ,fromLoc   = srcReqLoc ? srcReqLoc : srcSupLoc

    ,tplCfg    = {
        purchaseQty: purchaseQty
        ,fromLoc: fromLoc
    };

(Line up the = signs, or group related variables with blank lines, or both.)