JSLint, else and Expected exactly one space between '}' and 'else' error

Question

Why JSLint report in code:

function cos(a) {
    var b = 0;
    if (a) {
        b = 1;
    }
    else {
        b = 2;
    }

    return b;
}

error:

Problem at line 6 character 5: Expected exactly one space between '}' and 'else'.

This error can be turned off by disabling Tolerate messy white space option of JSLint.

Or in other words -- why syntax: } else { is better then

...
}
else {
...

Google also uses syntax with } else { form.

But I don't understand why. Google mentioned ''implicit semicolon insertion'', but in context of opening {, not closing one.

Can Javascript insert semicolon after closing } of if block even if next token is else instruction?

Sorry that my question is a bit chaotic -- I tried to think loud.

Altricial

Just for future reference: the flag for Tolerate messy white space is --white. – Cacuminal

Answer 1

JSLint is based on Crockford's preferences (which I share in this case).

It's a matter of opinion which is "better".

(Although clearly his opinion is right ;)

Matey

@GrzegorzGierlik I believe it looks better, and it conserves vertical space. I just don't believe the extra linefeed increases readability. – Matey

@Grzegorz: I don't really like your way - I prefer to either put } else { all on one line like JSLint wants or put both the } and { on their own lines - but it is just a matter of opinion: I have no trouble reading your way. Just pick the style you like and stick with it. (Note that even the option to turn this off in JSLint is called "Tolerate messy white space", which again goes back to one man's idea of "messy".) – Hardden

I have never, ever liked } else {. What bugs me about JSLint in this case is that there are real reasons to enforce the location of the open brace in function(){, and I want to have it enforce one, but not the other. :( – Holy

@OzhanDuz Your opinion. There are reasons to enforce coding conventions, what those conventions are is a separate issue. – Matey

Answer 2

It's not a matter of style. It's how ECMAScript works.

For better or for worse, it will automatically insert semicolons at the end of statements where it feels necessary.

JavaScript would interpret this:

function someFunc {
    return
    {
        something: 'My Value'
    };
}

As this:

function someFunc {
    return;
    {
        something: 'My Value'
    };
}

Which is certainly what you don't want.

If you always put the bracket on the same line as the if and if else statement, you won't run into a problem like this.

As with any coding language, the coding style chosen should be the one that minimizes potential risk the most.

Mozilla Developer Network also promotes same line bracketing: https://developer.mozilla.org/en-US/docs/User:GavinSharp_JS_Style_Guidelines#Brackets

Camarena

But ASI isn't an issue here, with an else statement. – Matey

This isn't an MDN recommendation; it's the personal preference, or proposal, of one Gavin Sharp. – Domela

Answer 3

JSLint is just being picky here. The guy who wrote it also baked in many stylistic suggestions in order to keep his own code more consistent.

As for semicolon insertion, you shouldn't need to worry here. Inserting a semicolon before the else clause would lead to a syntax error and automatic semicolon insertion only occurs in situations where the resulting code would still be syntactically valid.

If you want to read more on semicolon insertion, I recommend this nice reference

Basically if you insert semicolons everywhere you only need be careful about putting the argument to "return" or "throw" (or the label for "break" and "continue") on the same line.

And when you accidentally forget a semicolon, the only common cases that are likely to bite you are if you start the next line with an array literal (it might parsed as the subscript operator) or a parenthsised expression (it might be parsed as a function call)

Conclusion

Should you omit optional semicolons or not? The answer is a matter of personal preference, but should be made on the basis of informed choice rather than nebulous fears of unknown syntactical traps or nonexistent browser bugs. If you remember the rules given here, you are equipped to make your own choices, and to read any JavaScript easily.

If you choose to omit semicolons where possible, my advice is to insert them immediately before the opening parenthesis or square bracket in any statement that begins with one of those tokens, or any which begins with one of the arithmetic operator tokens "/", "+", or "-" if you should happen to write such a statement.

Whether you omit semicolons or not, you must remember the restricted productions (return, break, continue, throw, and the postfix increment and decrement operators), and you should feel free to use linebreaks everywhere else to improve the readability of your code.

---

By the way, I personally think that the } else { version is prettier. Stop insisting in your evil ways and joins us on the light side of the force :P

Scandic

ironical that in your bullet point about Parenthesis, you forget the closing paren? – Shorter

Haha, I'm definitely not fixing it now :) – Scandic

ASI also bites people with return statements, e.g., return on its own line, with the value on the next line. – Matey

Answer 4

JSLint is being very picky here, just enforcing a style that you might not share.

Try JSHint instead:

The project originally started as an effort to make a more configurable version of JSLint—the one that doesn't enforce one particular coding style on its users [...]

Marty

JSHint still likes to complain about my ternary operators though >:( – Scandic

@missingno: how is it that you write them? – Blackberry

Answer 5

I have just finished reading a book titled Mastering JavaScript High Performance. I speak under correction here, but from what I can gather is that "white space" does in fact matter.

It has to do with the way the interpreter fetches the next function. By keeping white space to a minimum (i.e.) using a minifier when your code is ready for deployment, you actually speed up the process.

If the interpreter has to search through the white space to find the next statement this takes time. Perhaps you want to test this with a piece of code that runs a loop say 10,000 times with white space in it and then the same code minified.

The statement to put before the start of the loop would be console.time and finally console.timeEnd at the end of the loop. This will then tell you how many milliseconds the loop took to compute.

Gladygladys

while your answer may be in the right direction, please try to provide a code snippet for this case, not only what the books says. – Efflorescence

Answer 6

The JSLint error/warning is suggesting to alter code to

// naming convention winner? it's subjective
} else if{
    b = 2;
}

from:

}
else if{
 b = 2;
}

It prevents insert semicolons; considered more standard & conventional. most people could agree a tab between the }tabelse if{

is not the most popular method. Interesting how the opening bracket { is placed (space or not) obviously both ar subjected

Cassatt