What is the benefit of using semicolon before a self-invoking function in JavaScript? I saw this approach in few popular jQuery plugins and I'm curious to find if this is the next awesome thing in JavaScript that I don't know.
4 Answers
If you concatenate two files with self-invoking functions together that look like this:
File A:
(function(){...A...})()
File B:
(function(){...B...})()
File A+B:
(function(){...A...})()(function(){...B...})()
You have two statements without separator. This happens when you cat files together and then minify them.
Now the author of file B puts a semicolon in front:
File B2:
;(function(){...B2...})()
And you'll get a working script:
(function(){...A...})();(function(){...B2...})()
-
21Well, why should I prefer the semicolon in front of the self-invoking function rather than after it? Commented Sep 9, 2011 at 17:24
-
40@7elephant 2 semi-colons don't hurt, but no semi-colons do, so it's a safety issue, especially relevant for larger projects– fncompCommented Sep 9, 2011 at 17:27
-
17
-
9Do you also include a semicolon at the beginning of each statement in case the previous statement doesn't end with one? Commented Mar 27, 2015 at 23:43
-
4@Brandon No, only in front of the whole file. The statements inside the concatenated files should be separated by semicolons anyway to create valid JavaScript code.– amoebeCommented Apr 3, 2015 at 19:37
Self-invoking functions are surrounded by parentheses, and in JavaScript parentheses are overloaded to mean
- Grouping expressions to override precedence:
(x + y) * z
- Function application :
f()
Putting a semicolon before the function prevents the function from becoming an argument to whatever precedes it when the parentheses become confused with function application.
Consider
var x = 42
(function () { ... })()
is the same as
var x = 42(function () { ... })()
but
var x = 42
;
(function () { ... })()
is the same as
var x = 42;
(function () { ... })()
-
3
-
@Neal, could you please explain. I think minification is entirely orthogonal to this. Commented Sep 9, 2011 at 17:22
-
2@Neal It's equivalent otherwise too: try replacing
...
withreturn 1
then add the semi-colon after 42 and see the difference.– fncompCommented Sep 9, 2011 at 17:23 -
Very interesting. I created a fiddle for what @Josh said so I could see for myself what happens: http://jsfiddle.net/LK63x/. Commented Sep 9, 2011 at 17:28
-
@Neal, Yeah. The newlines have nothing to do with it as shown by jsfiddle.net/vZvfG . Newlines only affect restricted productions in JS:
return
,this
,++
,--
,break
,continue
. Commented Sep 9, 2011 at 17:30
I write all JavaScript in a semicolon-free style. When writing without semicolons at the end of every line, due to Automatic Semicolon Insertion (ASI), there are a few special cases that can "be confusing" at first:
Starting a top-level expression with an operator, a
(
(open parenthesis) in this case, which like most other operators, can continue the previous expression and thus suppresses the "automatic insertion of a semicolon". (This generally only occurs when using a self invoking function.)Just kidding about #2: there isn't one! (Learn only one rule and you too can enjoy life without extra semicolons ;-)
Since I write in a semicolon-free style I thus always write it as (where the function-expression can naturally span multiple lines):
;(FunctionExpression)()
In my case it isn't about "safety" or trying to "catch an error" (honestly, if your style is to use semi-colons and you forget a semi-colon, then you've already created the error elsewhere and writing a ;
at the start for "safety" is hogwash). No; in my case it is done for consistency with knowledge of my chosen style and "knowing" that starting a line with an operator can continue an expression from a previous line.
See JavaScript: Semicolon Insertion (Everything You Need To Know) for the details (it is by far the best article I have seen on the subject).
Happy coding.
-
13You're asking for trouble, really, relying on what is essentially an mechanism to gloss over sloppy programming. The semicolons are there for a reason.– thepeerCommented Feb 5, 2013 at 15:07
-
6@thepeer No, no, I'm not really. Omitting semi-colons is not "sloppy coding". Please back up such unfounded claims; in my post I have explained what the "issue" is when writing in a semicolon-free style and provided a rule on how to write code that never has a problem with ASI. Then I explain why it is irrelevant to "safety" and provide a link to a resource covering the details (look up the
return
production in the link). On the other hand, the comment that provoked this response attacked my coding style and made a statement which I find to be unfounded. Not cool.– user166390Commented Feb 5, 2013 at 17:02 -
1@pst,
"undefined" === typeof (function () { return /*newline*/ 42; })()
is true precisely because a semicolon is inserted after thereturn
. Commented Feb 5, 2013 at 18:08 -
2Re "ick - side-effects in expressions?", people who write a lot of bash tend to produce JS that looks like bash :) Commented Feb 5, 2013 at 18:17
-
7@pst I wasn't accusing you of sloppy coding; forgive me if that's how it read. I meant that the reason why the js parser automatically inserts semicolons was originally - like some other js features (undeclared variables becoming global is another) - because js was seen as a hack-ish language that should be forgiving of sloppy coding practises. I'm aware that there is a movement to make semicolon-free js more rigorous; I'm against it. In fact I wish strict mode would throw an error or at least a warning when a semicolon is omitted.– thepeerCommented Feb 12, 2013 at 10:07
For me, the semi colon was triggering an error in Internet Explorer 8 (or at least that's what IETester said), and preventing the ui tabs from working properly.
The error message was Invalid character in jquery.all.ui.js Line: 1. Char: 1
.
I stumbled on the semi-colon completely by chance.
When I removed the ;
from the ;(function($)
it worked, seemingly without side-effects or loss of functionality.
I am using Drupal, don't know whether this has anything to do with the matter.
(
in order to prevent the JavaScript interpreter from interpreting the parens as a function invocation operator.