Why use (function() { .... }());
<blockquote>
  <p><strong>Possible Duplicate:</strong><br>
  <a href="http://stackoverflow.com/questions/1639180/how-does-the-function-construct-work-and-why-do-people-use-it">How does the (function() {})() construct work and why do people use it?</a>  </p>
</blockquote>



<p>Why do the modern JavaScript files use constructs like:</p>

<pre><code>(function () {
   // some real code
 }());
</code></pre>

<p>I.e. I understand that an anonymous function is being created and then called immediately, with no parameters passed... But why do it this way and not just call <code>some real code</code>? And what is the outer pair of round brackets for?</p>

<p>In particular I'm staring at the file <a href="https://github.com/hdragomir/Pocket-Island/blob/1d1295ddc53666b57bb283d93fcbdf3c72fdd30b/js/start.js" rel="nofollow">js/start.js</a> at Github:</p>

<pre><code>(function() {
    "use strict";

    wooga.castle.GRID_UNIT = 48;
    wooga.castle.IMAGES_BASE_URL = "images/entities/";

    (function () {
        var style = document.createElement('div').style,
            prefix;
        var candidates = {
            webkit: 'webkitTransform',
            moz:    'MozTransform', // 'M' is uppercased
            ms:     'msTransform',
            o:      'oTransform',
            '':     'transform'
        };
        for (var prefix in candidates) {
            var candidate = candidates[prefix];
            if ('undefined' !== typeof style[candidate]) {
                wooga.castle.prefix = prefix;
                wooga.castle.prefixedTransform = candidate;
                break;
            }
        }
    }());

    // XXX why the 2 wrapped "function"s here? XXX

    wooga.castle.isNativeWrapper = function() {
        var result = !wooga.castle.capabilities.desktop &amp;&amp; !wooga.castle.capabilities.android &amp;&amp; (! /Safari/.test(navigator.userAgent));
        wooga.castle.isNativeWrapper = function () {
            return result;
        };
        return result;
    };
}());
</code></pre>

<p>With my basic JavaScript and jQuery skills I understand the single commands listed above, but I don't get why are they wrapped inside of several <code>function</code>s. Can't we just call:</p>

<pre><code>    "use strict";

    wooga.castle.GRID_UNIT = 48;
    wooga.castle.IMAGES_BASE_URL = "images/entities/";
    var style = document.createElement('div').style,
        prefix;
    var candidates = {
        webkit: 'webkitTransform',
        moz:    'MozTransform', // 'M' is uppercased
        ms:     'msTransform',
        o:      'oTransform',
        '':     'transform'
    };
    for (var prefix in candidates) {
        var candidate = candidates[prefix];
        if ('undefined' !== typeof style[candidate]) {
            wooga.castle.prefix = prefix;
            wooga.castle.prefixedTransform = candidate;
            break;
        }
    }

    wooga.castle.isNativeWrapper = !wooga.castle.capabilities.desktop &amp;&amp; !wooga.castle.capabilities.android &amp;&amp; (! /Safari/.test(navigator.userAgent));
</code></pre>
