Why does the JavaScript need to start with ";"?

Question

I have recently noticed that a lot of JavaScript files on the Web start with a ; immediately following the comment section.

For example, this jQuery plugin's code starts with:

/**
 * jQuery.ScrollTo
 * Copyright (c) 2007-2008 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
 * Dual licensed under MIT and GPL.
 * Date: 9/11/2008                                      
 .... skipping several lines for brevity...
 *
 * @desc Scroll on both axes, to different values
 * @example $('div').scrollTo( { top: 300, left:'+=200' }, { axis:'xy', offset:-20 } );
 */
;(function( $ ){

Why does the file need to start with a ;? I see this convention in server-side JavaScript files as well.

What are the advantages and disadvantages of doing this?

Dittmer

Answer 1

I would say since scripts are often concatenated and minified/compressed/sent together there's a chance the last guy had something like:

return {
   'var':'value'
}

at the end of the last script without a ; on the end. If you have a ; at the start on yours, it's safe, example:

return {
   'var':'value'
}
;(function( $ ){ //Safe (still, screw you, last guy!)

---

return {
   'var':'value'
}
(function( $ ){ //Oh crap, closure open, kaboom!

---

return {
   'var':'value'
};
;(function( $ ){ //Extra ;, still safe, no harm

Ozmo

You can't actually have a return statement as the last thing in a script, can you? Returning at top level doesn't make sense. It'd have to be something else, right? – Outrageous

@Outrageous Even more so, code after a return statement doesn't get executed, so it doesn't make sense to concatenate. At least there is a } missing. – Disappoint

Answer 2

I believe (though I am not certain, so please don't pounce on me) that this would ensure any prior statement from a different file is closed. In the worst case, this would be an empty statement, but in the best case it could avoid trying to track down an error in this file when the unfinished statement actually came from above.

Robichaud

I am not 100% sure but I am with you on this one, Jerry. – Unison

Answer 3

Consider this example:

function a() {
  /* this is my function a */
}
a()
(function() {
  /* This is my closure */
})()

What will happen is that it will be evaluated like this:

function a() {
  /* this is my function a */
}
a()(function() {})()

So what ever a is returning will be treated as a function an tried to be initialized.

This is mostly to prevent errors when trying to concat multiply files into one file:

a.js

function a() {
  /* this is my function a */
}
a()

b.js

(function() {
  /* This is my closure */
})()

If we concat these files together it will cause problems.

So therefore remember to put your ; in front of ( and maybe also a few other places. Btw. var a = 1;;;var b = 2;;;;;;;;;var c = a+b; is perfectly valid JavaScript

Surgy