What does the leading semicolon in JavaScript libraries do?
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.
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.
It allows you to safely concatenate several JavaScript files into one, to serve it quicker as one HTTP request.
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