;-( – The plight of the semi-colon in JavaScript

Ahh, the joys of social coding.

Over the weekend, the widely popular Twitter Bootstrap project received a request to fix a bug.  Apparently, when the project is minified, a piece of it breaks because the authors take advantage of ‘Automatic Semicolon Insertion’ that occurs in JavaScript.

Read the request and comments here:  https://github.com/twitter/bootstrap/issues/3057

The gist of it is simple:

1. JavaScript semi-colons are, technically, optional.  If you don’t include a semi-colon and follow a statement with the specific literal, the JS interpreter is supposed to insert on for you.
2. Authors in the Twitter Bootstrap took this and wrote some valid JS code, as is shown below:

     clearMenus()
     !isActive && $parent.toggleClass('open')

3. The code was then minified using JSMin (from Douglas Crockford), but produces not so valid JS so a bug fix was requested.
4. @fat responded that it’s a bug in JSMin and not in the code.
5. @douglascrockford responded with

That is insanely stupid code. I am not going to dumb down JSMin for this case.

What followed was a flurry of posts that I care not to go into.  Some where well thought out, others just showed immaturity.  Twitter was all a flutter with tweets about this so I decided to look at it myself to understand what all this was about and this is what I learned:

1. Semi-colons are optional
2. There are plenty of major frameworks that practice bad JavaScript styles

Semi-colons are optional

I heard about this, but never really believed it because JavaScript a class of languages that fall in the C family tree.  The C family tree has many descendants that all add their own flavor to the C grammer, but they can all be traced back to the venerable language, either as a subset of the language, a superset of the language, or influenced by the language.

Since I have actually done programming outside of the modern day web world, C type languages have certain characteristics that I have come to expect (correctly or incorrectly).  One is the use of braces { and } as defining some sort of block.  Another is that a statement that is not a block, again the lovely { and }, is always terminated with a semi-colon (;).

So when I looked at the actual code in question, my initial response was just as terse and critical as Doug Crockford’s response.

Bad JavaScript practices are plentiful

So apparently there is this rage in development that tries to take a language is forgiving and take advantage of that to make a new dialect of it.  There is a breed of programmers that laugh at the semi-colon and basically consider it a hassle and wasted character.

This sort of reminds me of Internet Explorer 4.  It had a ‘feature’ that ‘forgave’ misuse of the HTML spec, which included not closing certain tags and placing things where they didn’t belong.  As a result, websites were development with these mistakes (which they were) and for 10 years following, bad practices propagated to a whole new group of developers until a web development renaissance came upon us in which web developers with some clout started to vocalize their displeasure with lack of standards support.

It is sort of ironic, though, that the same group of developers that rail against Internet Explorer for its lack of standards is home to these JavaScript developers that bash the semi-colon.

Here’s the thing about bad practices:  They spread like viruses if not caught and treated properly.   Look at the damage that IE4′s forgiveness did.  A whole generation of developers learned the wrong way of doing websites.  Now that same mentality is apparently rampant in the JavaScript community.

JavaScript is part of the C family tree!

I just don’t get why a group of developers who claim to want standards in the web are so against the use of semi-colons.  Sure, it’s optional, but even Brendan Eich has stated

Some of the github issue comments are naive or idealistic to the point of being silly. Since when does any programming language not have syntax arguments? All living, practical languages that I know of, even those with indentation-based block structure and similar restrictions, have degrees of freedom of expression that allow abusage as well as good usage. Language designers can try to reduce degrees of freedom, but not eliminate them completely.

My two cents: be careful not to use ASI as if it gave JS significant newlines. And please don’t abuse && and || where the mighty if statement serves better.

You can read his whole post, which comments on both sides of the argument, here:  http://brendaneich.com/2012/04/the-infernal-semicolon/

The purpose of the semi-colon is to terminate a single expression in JavaScript.  It helps the JS engines know where the expression ends.  Using some alternative, and mostly unknown, syntax that is ‘valid’ just adds more confusion to an already confusing topic:  Good JavaScript Practice.

And seriously, is this alternative so wrong?  It definitely makes the code easier to understand in my opinion and avoids potential issues with JavaScript processors, like JSMin.

  clearMenus();
  if (!isActive) $parent.toggleClass('open');

If the use of the semi-colon is such a drain on you, then maybe you should look at alternatives, like CoffeeScript or, even better for your style programming, VBScript.

Tweet