When semicolons are NOT optional in JavaScript

An inadvertently skipped semicolon recently left me scratching my head over a runtime error. The code looked something like this:

// Add a new function to an existing namespace
some.namespace.doSomething = function () {
    // ...
}

// Define more functions inside a closure to hide some helpers
(function () {
    // ...
})();

This was giving me a “yada yada yada… is not a function” error. In despair, I commented out the closure at the cost of polluting the global namespace! I recently revisited the code (taking a break always helps) and noticed that I was missing a semicolon after the initial function definition:

// Add a new function to an existing namespace
some.namespace.doSomething = function () {
    // ...
}; // <---------------------- AH-HA!

Now, why is this semicolon so important? Let’s look at how the code reads without the semicolon, after removing some of the whitespace fluff:

some.namespace.doSomething = function () {
    // ...
}(function () {
    // ...
})();

In effect, without the semicolon, the opening parenthesis that I used around the closure becomes a function call operator on the first function definition. I end up passing the second function to the first function, and then calling the result of that call as a function. If the first function returned a function as a result, I wouldn’t have been getting this runtime error.

Why did I bother writing this up? Firstly, I wasted precious time due to a single missing semicolon and wanted to share the resolution.

Secondly, I’m an advocate of strict style. I always end my JavaScript lines with semicolons, even if JavaScript doesn’t mandate it. In JavaScript tutorials here and there, authors sometimes preach that “semicolons in JavaScript are completely optional” and that “you don’t need to use them unless you’re putting multiple statements in one line.” Wrong! The above piece of code is something that you’re likely to see in a modern JavaScript framework (hey, closures are big!) and is therefore a non-obscure example of why you should always use semicolons.

Also, JavaScript minifiers perform better in the presence of consistent semicolon usage.