What is the reason that JSLint says that there are "too many var statements",

Question

JSLint (with the onevar flag enabled) puts some javascript code that I have with the following:

  Problem at line 5 character 15: Too many var statements. 

I am happy to fix these errors, but I would like to know if I am doing this for performance or because it is just bad practice and has more potential for introducing errors into javascript code. What is the reason for the onevar flag?

I looked at the JSLint docs for the var keyword , but it does not specifically say why several var statements in the same function are bad.

Here is an example of an example. Explain how the code will only be useful if you have 1 var statement:

function Test(arg) { var x = arg + 1, y = cache.GetItem('xyz'); if (y !== null) { // This is what would cause the warning in JSLint var request = ajaxPost(/* Parameters here */); } } 

Answer 1

Javascript does not have a block area. In other languages ​​with it (e.g. c), if you declare a variable in an if statement, you cannot access it outside of it, but in javascript you can. JSLint believes this is bad practice, as you (or other readers) may get confused and think that you can no longer access the variable, but you can actually. Therefore, you must declare all your variables at the top of the function.

Answer 2

The official reason is here , Douglas Crockford.

Quote:

In many languages, a block introduces a scope. Variables entered into the block are not displayed outside the block.

In JavaScript, blocks do not enter an area. There is only a function sphere. A variable entered anywhere in a function is visible everywhere in the function. JavaScript blocks are blocked by experienced programmers and lead to errors because the familiar syntax makes a false promise.

JSLint expects blocks with the function, if, switch, while, for, do and try statements and nowhere else.

In block-area languages, it is usually recommended that variables be declared at the place of first use. But since JavaScript does not have a block area, it makes more sense to declare all functions variables at the top of the function. It is recommended that one var for each function. This can be rejected using the vars option.

Answer 3

Just declare your vars in one place:

 var request,x,y; 

Answer 4

If the "onevar" parameter is set to true, if only one var statement is allowed for each function.

 if (funct['(onevar)'] && option.onevar) { warning("Too many var statements."); } 

Answer 5

The rationale has already been described.

The recommendation is to use this form:

 var myVar1 = document.getElementById("myDiv1"), myVar2 = document.getElementById("myDiv2"); 

or that:

 var myVar1, myVar2; myVar1 = document.getElementById("myDiv1"); myVar2 = document.getElementById("myDiv2"); 

But this does not look very good, especially if you want to document vars.

So, you can temporarily disable this warning:

  /*jslint vars: true*/ /** * @returns {HTMLDivElement} */ var myVar1 = document.getElementById("myDiv1"); /** * @returns {HTMLDivElement} */ var myVar2 = document.getElementById("myDiv2"); /*jslint vars: false*/ 

Warning: make sure this is done at the top of the function.

I think this is done because jslint cannot reliably determine if vars were declared at the top of the function or not.

Answer 6

Just an assumption, but there may be time for functional decomposition . Functions should do one thing and do it well.

Too many vars points to a function that is trying to do too much. Or the case where you should use an array.

Answer 7

The idea is that you should use an object instead of individual vars. So where do you have:

 var x = arg + 1, y = cache.GetItem('xyz'); 

Change it to:

 var dimensions = {}; dimensions.x = arg + 1; dimensons.y = cache.GetItem('xyz'); dimensions.request = ... 

Then you can access these variables through an object ahead of it, so that one object for each function contains these function variables. Then you will not receive a warning.