What does the leading semicolon in JavaScript libraries do?

Question

In several JavaScript libraries I saw this notation at the very beginning:

/**
 * Library XYZ
 */
;(function () {
  // ... and so on

While I'm perfectly comfortable with the "immediately executed function" syntax

(function(){...})()

I was wondering what the leading semicolon is for. All I could come up with is that it is an insurance. That is, if the library is embedded in other, buggy code, it serves as an "the last statement ends here at the latest" kind of speed bump.

Has it got any other functionality?

Answer 1

It allows you to safely concatenate several JavaScript files into one, to serve it quicker as one HTTP request.

Answer 2

The best answer was actually given in the question, so I will just write that down here for clarity:

The leading ; in front of immediately-invoked function expressions is there to prevent errors when appending the file during concatenation to a file containing an expression not properly terminated with a ;.

Best practice is to terminate your expressions with semicolons, but also use the leading semicolon as a safeguard.

Answer 3

In general, if a statement begins with (, [, /, +, or -, there is a chance that it could be interpreted as a continuation of the statement before. Statements beginning with /, +, and - are quite rare in practice, but statements beginning with ( and [ are not uncommon at all, at least in some styles of JavaScript programming. Some programmers like to put a defensive semicolon at the beginning of any such statement so that it will continue to work correctly even if the statement before it is modified and a previously terminating semicolon removed:

var x = 0 // Semicolon omitted here
;[x,x+1,x+2].forEach(console.log) // Defensive ; keeps this statement separate

Source:

JavaScript: The Definitive Guide, 6th edition

Answer 4

This is referred to as a leading semicolon.

Its main purpose is to protect itself from preceding code that was improperly closed, which can cause problems. A semicolon will prevent this from happening. If the preceding code was improperly closed then our semicolon will correct this. If it was properly closed then our semicolon will be harmless and there will be no side effects.

Answer 5

A one-line answer is to safely concatenate multiple JavaScript files. Using a semicolon does not raise an issue.

Suppose you have multiple functions:

IIFE 1

(function(){
  // The rest of the code
})(); // Note it is an IIFE

IIFE 2

(function(){
   // The rest of the code
})(); // Note it is also an IIFE

On concatenation it may look like:

(function(){})()(function(){})()

But if you add a semicolon before the function it will look like:

;(function(){})();(function(){})()

So by adding a ;, it takes care if any expression is not properly terminated.

Example 2

Assume you have a JavaScript file with a variable:

var someVar = "myVar"

Another JavaScript file with some function:

(function(){})()

Now on concatenation it will look like

var someVar = "myVar"(function(){})() // It may give rise to an error

With a semi-colon, it will look like:

var someVar = "myVar";(function(){})()

Answer 6

It's good when you minify JavaScript code. It prevents unexpected syntax errors.