Why does jslint prefer splitting variable declarations in javascript?

Viewed 67

Why does jslint suggest splitting variable declarations in JavaScript. Is there any benefit doing that? What I understood until today was both below option 1 and option 2 are same. What is the difference?

Option 1

var element1, element2;

Option 2

var element1, 
var element2;
2 Answers

These declarations are technically the same, and, really, a matter of preference. The difference comes from the human factor. jslint's rule prefers consistency and readability, especially for the long term of a project.

Consider the following code:

var variable1 = "value 1", variable2 = "value 2"; 

This doesn't look too bad, but even with two variables, its a bit harder to read than if the declarations were split over two lines.

Now imagine that the project grows over a few months, and the same line also grows accordingly:

var variable1 = "value 1", variable2 = "value 2", variable4 = "value 4", 
    variable5 = "this"; 
var variable6 = "starts"; 
var variable7 = "to get", variable8 = "hard", variable9 = "to read"; 

Without any particular enforcement, developers can choose where to declare their variables however they want, which means that they could add them to an existing declaration line, or add a new declaration. This choice is, generally, completely subjective. As demonstrated above, the code becomes increasingly harder to read compared to:

var variable1 = "value 1";
var variable2 = "value 2"; 
var variable4 = "value 4";
var variable5 = "this";
var variable6 = "starts";
var variable7 = "to get";
var variable8 = "hard";
var variable9 = "to read";

(I even made a mistake typing this answer out because I lost track of the variable numbers, and I only noticed when I split the declarations into lines.)

With this rule in place, developers don't need to think about whether variable declarations should be grouped and when to start a new declaration, which eliminates some mental burden and improves consistency across the codebase. Single-declarations-per-line also make it easier to move them around when needed, especially in editors with keybindings that cut and paste whole lines.

Ultimately, this is still a personal decision. We can disable the rule if desired. Choose the approach that works best for your project.

Other than readability and avoiding repetition, There is no actual practical advantage of one over another.

You will write less and clean code if you dont use multiple var statements but there is an interesting discussion about it in this article where they show some cases in which for instance you can forget to insert a comma and use

var element1
    element2;

which could cause the second variable to be declared globally due to automatic semi-colon insertion.

Although using a single var may be more error prone and impractical to maintain(e.g., indentation, moving the variable declaration to somewhere else in the code), I think it is a purely personal decision.

Related