JSLint Error: Unexpected '-'

Question

I get two errors in the JS file, both "Unexpected" - ".". It is in the code for scrolling the mouse (both times this.addEventListener( types[--i], handler, false ); ). I have never seen this syntax anywhere before. What is it and how should I fix it correctly and make JSLint happier?

 (function($) { var types = ['DOMMouseScroll', 'mousewheel']; $.event.special.mousewheel = { setup: function() { var i; if ( this.addEventListener ) { i = types.length; while ( i >= 0 ) { this.addEventListener( types[--i], handler, false ); } } else { this.onmousewheel = handler; } }, teardown: function() { if ( this.removeEventListener ) { i = types.length; while ( i >= 0 ) { this.removeEventListener( types[--i], handler, false ); } } else { this.onmousewheel = null; } } }; 

Answer 1

Syntax

--n reduces the variable. A little more common that you may have seen is n++ , which seems to be, but increases the variable.

-- or ++ can appear before or after a variable, and there is a subtle difference. When it comes earlier, it changes the value and then returns the changed value. When this happens, it returns the original value. When using a value directly, it matters.

 var i; // affix i = 1; console.log(i++, i) // 1 2 i = 1; console.log(i--, i) // 1 0 // prefix i = 1; console.log(++i, i) // 2 2 i = 1; console.log(--i, i) // 0 0 

Notice how the value of the prefix increment or decrement expression returns the same value for i after an operation where there is no affix version.

So, a long story, JSLint really dislikes the prefixes of increment operators. But this should be equivalent:

 while ( i >= 0 ) { i -= 1; this.removeEventListener( types[i], handler, false ); } 

Without using the direct result of the decrease operation, it ceases to matter how this operator works and what it returns. It is also a little more explicit, and JSLint loves explicitly.

Answer 2

JSLint rejects all operators --i , i-- , ++i and i++ .

just put the line with

 i -= 1; 

in front of both lines with errors and replace --i with just i , and JSLint should be happy.

--i reduces the variable i by one before executing the surrounding statement. code readability using this is worse than code without it. This is the reason JSLint is preventing its use.

Answer 3

Change this:

 while ( i >= 0 ) { this.addEventListener( types[--i], handler, false ); } 

For this:

 while ( i >= 0 ) { i -= 1; this.addEventListener( types[i], handler, false ); } 

The -- operator preceding a variable reduces the value of the variable before use, storing the new value in the variable. So, --i is a pre-decrement and means "set i to the value i-1 , and then proceed with what you are going to do with i ." The opposite operation will be post-decrement ( i-- ), which means "use i as for the current operation, and then set its value to i-1 ."

Crockford, by default, JSLint rejects this kind of operation because he believes it is confusing, difficult to read, and less durable. You can also go on to tune the LINT tool to "Tolerate - and ++" (LINT plusplus: true property plusplus: true ). In your case, however, the setup is minimal for the code, so editing is probably preferable.

Answer 4

Change the line as follows:

 this.addEventListener( types[i -= 1], handler, false ); 

to make JSLint happy.

See Why avoid increments ("++") and shorten ("-") operators in JavaScript? and post increment vs pre increment - Optimization of Javascript (and others with googling "pre and post increment javascript") for what ++ and - actually are.