Front End Collision

Blog of software engineer Josh Beam

Why do people add semicolons before modules?

22 March 2015 — Josh Beam — javascript snippet

All Posts
This post is going to discuss the reasoning behind a strange-looking syntax style that some people use when declaring JavaScript modules (in the context of immediately invoked function expressions). Simply put, the point of this trick is to get around minification issues when using other people's code (or your own).

Simple answer: because of minification issues.

Minification can cause modules to use each other as their arguments (unintentionally), if the developer isn’t careful.

(function() {
	// code

(function() {
	// code	

If you look closely enough at the above, you’ll see the first IIFE is missing a semicolon at the end.

That means that when minified, it’ll look like this:

The broken code:

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

// (a)()(b)()

The problem is that now function a is being called with function b passed in as an argument. Interesting.

So, we just add a ; to the beginning of the module, and to the end. This acts as a safeguard to ensure we don’t run into that problem when we minify.

So, when we try doing the above example with semicolons at the beginning and at the end, and you minify the code, you get this instead:

The working code:

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

The cool thing is, the above doesn’t throw any errors. In fact, JSHint won’t yell at you either.

Why is this? Check out the MDN article on empty:

An empty statement is used to provide no statement, although the JavaScript syntax would expect one.

So those extra semicolons are not a syntax error, because a random semicolon anywhere in the code can be interpreted as an empty statement. Cool, huh?