When should I use the syntax "(function() {...})();"?

Question

My query is used in cases that "(function() {...})();" Given that I am not a plugin. For example "http://piecesofrakesh.blogspot.com/2009/03/downloading-javascript-files-in.html"

(function() {        
  var s = [
    "/javascripts/script1.js",
    "/javascripts/script2.js"
  ];

  var sc = "script", tp = "text/javascript", sa = "setAttribute", doc = document, ua = window.navigator.userAgent;

  for(var i=0, l=s.length; i<l; ++i) {
    if(ua.indexOf("MSIE")!==-1 || ua.indexOf("WebKit")!==-1) {
      doc.writeln("<" + sc + " type=\"" + tp + "\" src=\"" + s[i] + 
          "\" defer></" + sc + ">");
    } else {
      var t=doc.createElement(sc);
      t[sa]("src", s[i]);
      t[sa]("type", tp);
      doc.getElementsByTagName("head")[0].appendChild(t);
    }
  }
})();

Or

var s = [
    "/javascripts/script1.js",
    "/javascripts/script2.js"
];
...

Thank you.

Sorry, I write very bad in English. The script is not a plugin, in which case it is useful to use this structure "(function (){...}();" — andres descalzo, Jul 31 '09 at 13:19
Agreed, I hope when I have to use a language other than English, people have patience for me.... — Jason S, Jul 31 '09 at 13:25
i *think* this is a duplicate of this question: http://stackoverflow.com/questions/423228/difference-between-function-and-function - Difference between (function(){})(); and function(){}(); — Kip, Jul 31 '09 at 13:26
@andres descalzo: I didn't mean that offensively; really no need to be sorry. Just thought it was a cute expression. — balpha, Jul 31 '09 at 13:53

score 24 · Accepted Answer · answered Jul 31 '09 at 13:17

This is done to avoid naming conflicts.

When you declare a function, that function has its own namespace for variables. By wrapping the code in a function that is immediately invoked, you avoid overwriting global variables with your own values.

In this case s and sc are assigned a value. If you did that at the global scope and other scripts were already using variables with those names for a different purpose, that would cause those other scripts to fail. By introducing the new scope, the identifiers s and sc now refer to different (locally-bound) variables than the variables named s and sc that exist at the global scope.

score 6 · Answer 2 · edited May 23 '17 at 12:30

6

Maybe these questions will help you out:

edited May 23 '17 at 12:30

Community

1
1

answered Jul 31 '09 at 13:18

Kip

107,154
87
232
265

score 3 · Answer 3 · answered Jul 31 '09 at 13:24

(function() {...})(); is a self-invoking anonymous function i.e. a function with no name that is executed straight away. Since JavaScript has function scope, using self-invoking anonymous functions limits the scope of variables inside the function to the function itself, thereby avoiding any conflicts that might occur otherwise.

In jQuery, a self-invoking anonymous function is used quite often by plugin authers to reference the jQuery object with the $ symbol inside of the function. For example

(function($) {

    /* plugin code here */

})(jQuery);

score 2 · Answer 4 · answered Jul 31 '09 at 13:19

Idiom (function() {...})(); limits scope of your variables. So in first case s (and sc, tp etc) won't be accessible anywhere outside function body. In second case you will be able to access it. So (function() {...})(); keeps you from namespace pollution. Whether you need that is another question. You may like to google something like "scope javascript". There's a nice article.

When should I use the syntax "(function() {...})();"?

4 Answers4