StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>It's usually to namespace (see later) and control the visibility of member functions and/or variables. Think of it like an object definition. jQuery plugins are usually written like this.</p> <p>In Javascript, you can nest functions. So, the following is legal:</p> <pre><code>function outerFunction() { function innerFunction() { // code } } </code></pre> <p>Now you can call <code>outerFunction()</code>, but the visiblity of <code>innerFunction()</code> is limited to the scope of <code>outerFunction()</code>, meaning it is private to <code>outerFunction()</code>. It basically follows the same principle as variables in Javascript:</p> <pre><code>var globalVariable; function someFunction() { var localVariable; } </code></pre> <p>Correspondingly:</p> <pre><code>function globalFunction() { var localFunction1 = function() { //I'm anonymous! But localFunction1 is a reference to me! }; function localFunction2() { //I'm named! } } </code></pre> <p>In the above scenario, you can call <code>globalFunction()</code> from anywhere, but you cannot call <code>localFunction1</code> or <code>localFunction2</code>.</p> <p>What you're doing when you write <code>(function() { ... code ... })()</code>, is you're making the code inside a function literal (meaning the whole "object" is actually a function). After that, you're self-invoking the function (the final <code>()</code>). So the major advantage of this as I mentioned before, is that you can have private methods/functions and properties:</p> <pre><code>(function() { var private_var; function private_function() { //code } })() </code></pre> <p>In the first example, globalFunction() was the public function that could be called to access the public functionality, but in the above example how do you call it? Here the self-invoking function makes the code automatically run at start up. Just like you can add initMyStuff(); to the top of any .js file and it will automatically run as part of the global scope, this self-invoking function will also automatically run, although since it's an unnamed function it cannot be called multiple times like initMyStuff() could be.</p> <p>The neat thing is that you can also define things inside and expose it to the outside world so (an example of namespacing so you can basically create your own library/plugin):</p> <pre><code>var myPlugin = (function() { var private_var; function private_function() { } return { public_function1: function() { }, public_function2: function() { } } })() </code></pre> <p>Now you can call <code>myPlugin.public_function1()</code>, but you cannot access <code>private_function()</code>! So pretty similar to a class definition. To understand this better, I recommend the following links for some further reading:</p> <ul> <li><a href="http://archive.is/yXtVK" rel="noreferrer">Namespacing your Javascript</a></li> <li><a href="http://www.crockford.com/javascript/private.html" rel="noreferrer">Private members in Javascript (by Douglas Crockford)</a></li> </ul> <p><strong>EDIT</strong></p> <p>I forgot to mention. In that final <code>()</code>, you can pass anything you want inside. For example, when you create jQuery plugins, you pass in <code>jQuery</code> or <code>$</code> like so: </p> <pre><code>(function(jQ) { ... code ... })(jQuery) </code></pre> <p>So what you're doing here is defining a function that takes in one parameter (called <code>jQ</code>, a local variable, and known <em>only</em> to that function). Then you're self-invoking the function and passing in a parameter (also called <code>jQuery</code>, but <em>this</em> one is from the outside world and a reference to the actual jQuery itself). There is no pressing need to do this, but there are some advantages:</p> <ul> <li>You can redefine a global parameter and give it a name that makes sense in the local scope.</li> <li>There is a slight performance advantage since it is faster to look things up in the local scope instead of having to walk up the scope chain into the global scope.</li> <li>There are benefits for compression (minification).</li> </ul> <p>Earlier I described how these functions run automatically at startup, but if they run automatically who is passing in the arguments? This technique assumes all the parameters are defined as global variables. So if jQuery wasn't defined as a global variable this example would not work, and could not be called any other way since our example is an anonymous function. As you might guess, one things jquery.js does during it's initialization is define a 'jQuery' global variable, as well as it's more famous '$' global variable, which allows this code to work after jquery.js is included.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload