Is semicolon at the beginning of code still good practice?

Question

I have been taught that it is a good practice to always insert a semicolon at the beginning of JavaScript code, as following:

;(function(){

})();

However, many popular JavaScript libraries/frameworks do not use this, such as jQuery, Backbone, etc.

I believe that the semicolon at the beginning is supposed to prevent bad code to break the minified/compressed code, etc. But still, why no one is using it anymore?

Has the semicolon at the beginning turned out to be useless for some reason?

*No one is doing it anymore*: What kind of evidence do you have to support that claim? — Andrew Whitaker, Feb 22 '13 at 14:50
If you want to talk about "good practice", I'd say move the invocation parenthesis inside the parenthesis that contain the function. — Paul S., Feb 22 '13 at 14:51
"the semi-colon before function invocation is a safety net against concatenated scripts and/or other plugins which may not be closed properly." (http://jqueryboilerplate.com/) It is only ever necessary, if you script on a page where other 3rd party scripts are also loaded/executed. — marekful, Feb 22 '13 at 14:52
Another thing you might consider is to add a semicolon at the *end* of your code. It's syntactically correct, and it adds protection for the script appended to yours. — Pointy, Feb 22 '13 at 14:52
@PaulS. Putting it inside of the parenthesis makes it do something different than having it outside though — Mark Pieszak - Trilon.io, Feb 22 '13 at 14:52
@mcpDESIGNS no, it's OK: `(function(){}())` is the same as `(function(){})()` — Pointy, Feb 22 '13 at 14:53
I realize that, but according to SLaks and his example, there is a slight difference, was just pointing that out :/ http://stackoverflow.com/questions/5938802/are-function-and-function-functionally-equal-i/5938845#5938845 — Mark Pieszak - Trilon.io, Feb 22 '13 at 15:00
@Andrew Whitaker: look at the source of jQuery or Backbone, you will find out what I meant .. When I said "no one", I actually meant "why none of the mentioned libraries/frameworks is doing that" .. my bad. — Frank, Feb 22 '13 at 15:08
Had a colleague wave a rubber chicken over his computer before each build. Like your belief about semicolons, it had no merit. The upside is it did not infect others with his practice. Cannot say the same for this. Semicolons are used when they're required period. They are rarely required. — Rick O'Shea, Feb 12 '19 at 22:42

Daff · Answer 1 · 2013-02-22T15:45:53.450

8

The more common practise is to add a semicolon at the end of the file. The issue is, when you concatenate two files like this:

// file1.js
(function() {
})()

// file2.js
(function() {
})()

Without putting a semicolon at the end of file1, it will try to invoke the return value from the function in file1 with the function in file2. Putting a semicolon at the end of each file will solve this (as will putting them at the beginning).

Another way is to turn the function invocation into a statement like this:

!function() {
}();

I think this is also recommended by JSLint, because in this case you don't have to worry about semicolons (although you should use them anyway but that's a different discussion altogether ;).

edited Feb 22 '13 at 15:45

answered Feb 22 '13 at 14:56

Daff

43,734
9
106
120

do you have an example useage of `!function () { }();` ? I've actually never seen that syntax before! +1 – Mark Pieszak - Trilon.io Feb 22 '13 at 15:13
2

Ben Alman wrote a great article on this: http://benalman.com/news/2010/11/immediately-invoked-function-expression/ – Daff Feb 22 '13 at 15:52

score 3 · Accepted Answer · answered Feb 22 '13 at 15:21

Ideally minifying and merging multiple files should have no affect your coding style. You should be able to write your program as you wish and then use an automated tool to correctly merge and minify your project.

There are lots of automated tools that do this. Take a look at UglifyJS 2 for example. I'm sure you'll be able to find many more such tools if you look around.

Getting back to the question, it's important to insert a semicolon after an immediately invoked function expression as Daff pointed out. However there's no reason to put a semicolon before it. If you be a good boy and put a semicolon after every statement and expression then you should never have any problems.

Do not let JavaScript ever do automatic semicolon insertion for you.

The only place where it's permissible to not put a semicolon is after a function declaration:

function foo() {} // it's alright to not put a semicolon here

However if you're using a function expression then always put a semicolon.

(function foo() {})(); // you should put a semicolon here

Putting semicolons anywhere else is just confusing. Especially at the beginning of a line. People from other programming backgrounds may also think it's the start of an end of line comment.

*"You should be able to write your program as you wish... [then a bunch of rules that imply you shouldn't be able to write your program as you wish]"* That's contradictory. — the system, Feb 22 '13 at 20:57
*"Do not let JavaScript ever do automatic semicolon insertion for you."* [That's silly.](http://blog.izs.me/post/2353458699/an-open-letter-to-javascript-leaders-regarding) *"The only place where it's permissible to not put a semicolon is after a function declaration"* That's wrong. *"Putting semicolons anywhere else is just confusing."* That's just your opinion. *"People from other programming backgrounds may also think it's the start of an end of line comment."* That's irrelevant. — the system, Feb 22 '13 at 20:59

Is semicolon at the beginning of code still good practice?

2 Answers2