2
votes
\$\begingroup\$

I have been setting multiple variables like this

function doSomething() {

    var FirstName = $FirstName.data("ov");
    var LastName = $LastName.data("ov");
    var Company = $Company.data("ov");
    var Website = $Website.data("ov");

}

I just read some reviewed code and both reviewers advised setting the variables in a single statement, like this:

function doSomething() {

    var FirstName = $FirstName.data("ov"),
        LastName = $LastName.data("ov"),
        Company = $Company.data("ov"),
        Website = $Website.data("ov");

}

What would be the advantage of doing it the second way? Is there a performance benefit? Is it that there is less code?

\$\endgroup\$
3
votes
\$\begingroup\$

From a very good book called JavaScript Patterns:

Using a single var statement at the top of your functions is a useful pattern to adopt. It has the following benefits:

  • Provides a single place to look for all the local variables needed by the function
  • Prevents logical errors when a variable is used before it's defined
  • Helps you remember to declare variables and therefore minimize globals
  • Is less code (to type and to transfer over the wire)

The author also recommends initializing the variables when you declare them when possible.

\$\endgroup\$
  • \$\begingroup\$ Those are some compelling reasons, the least of which is a performance boost. \$\endgroup\$ – Evik James Jun 12 '12 at 21:10
  • \$\begingroup\$ @Evik - mucking up the global namespace, by forgetting the var keyword can have huge performance impacts. So, I assume you are referring to the "is less code" bullet. \$\endgroup\$ – Ryan Miller Jun 12 '12 at 21:13
  • \$\begingroup\$ I tend to not mistakes like that, forgetting to var it. I made that mistake early on and killed my browser memory doing a bunch of Ajax stuff. Assuming I code it correctly, it will have little performance advantage. The real advantage will be in creating the necessary local variables right away at the top of the function. \$\endgroup\$ – Evik James Jun 12 '12 at 21:24
  • \$\begingroup\$ I'd argue that at least #1 and #3 do not matter in this case. The first code example does provide a "single place to look for" and minimizes globals just as much as the second example. In fact, the only example of those 4 that seems to make a difference in this case is #4 and, even then, not by much(in this particular case - assuming spaces are used - there are exactly as many bytes being sent) \$\endgroup\$ – luiscubal Jun 12 '12 at 22:42
1
vote
\$\begingroup\$

In terms of performance, there is little difference across both methods. Another test found here which has greater browser coverage.

In terms of readability, I'd go for the multiple variables using a single var since it is less messy.

All in all, it depends on you.

\$\endgroup\$
1
vote
\$\begingroup\$

There should be no noticeable difference in performance (even if there was, it would most likely be negligible) and they mean the same.

It's just a matter of picking the one that's most readable. Frankly, I don't find the second example more readable than the first, but this is subjective.

EDIT: One possible difference is that smaller code (assuming those are charaters replacing "var" are tabs and not spaces) might reduce traffic, making the page faster. However, in practice, I think the best JS minifiers should handle that sort of thing for you.

\$\endgroup\$
  • \$\begingroup\$ I think you meant "there should be NO noticeable..." Is that correct? \$\endgroup\$ – Evik James Jun 12 '12 at 21:05
  • \$\begingroup\$ @EvikJames Indeed. Sorry for the mistake. \$\endgroup\$ – luiscubal Jun 12 '12 at 21:06

Not the answer you're looking for? Browse other questions tagged or ask your own question.