StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>There are already two answers but this is my guess on the missing end of the code:</p> <pre><code>(function ($, window, undefined) { // ... jquery code... })(jQuery, window); </code></pre> <p>Note: <strong>three</strong> parameters are expected but <strong>two</strong> are supplied.</p> <p>What it basically does is:</p> <ol> <li>gives a private scope inside curly braces, so any <code>var</code> declared inside is not visible outside</li> <li>makes a private <code>$</code> shortcut to <code>jQuery</code> without relying on this shortcut being set globally (eg. <code>jQuery.noconflict()</code> might have been called and this would still work)</li> <li>makes a lexical window variable that would mean faster lookups for global variables</li> <li>makes sure that <code>undefined</code> is indeed undefined in the scope between curly braces, even if someone has written something like <code>undefined = "now it's defined";</code> in the global scope, because <code>undefined</code> can actually be redefined (this is a mistake of the language).</li> </ol> <p>This pattern is known as immediately invoked function, or immediate function for short, or self-invoking anonymous function, or some other names. The basic idea is that:</p> <pre><code>(function (x, y) { // ... })(1, 2); </code></pre> <p>or:</p> <pre><code>(function (x, y) { // ... }(1, 2)); </code></pre> <p>means the same as:</p> <pre><code>function myFunction (x, y) { // ... } myFunction(1, 2); </code></pre> <p>but without the need to give any name to your function and pollute the namespace.</p> <p>Going back to your question, this doesn't mean <code>$(document).ready()</code> or anything like that, but it means that you can use <code>$(document).ready()</code> <strong>inside</strong> instead of <code>jQuery(document).ready()</code> even if the <code>$</code> shortcut is not available outside.</p> <p>This example may actually explain it better, even if it isn't used anywhere:</p> <pre><code>(function (JQ, window, undefined) { JQ(document).ready(function () { // this is run when document is ready }); })(jQuery, window); </code></pre> <p>Now instead of <code>$</code> you can call jQuery as <code>JQ</code> and use <code>JQ(document).ready()</code> instead of <code>$(document).ready()</code> – it may not seem very useful but it shows what happens when you have a code like that.</p> <p>As a side note I might add that thanks to this pattern you don't actually need variable declarations in the language but only function arguments. Instead of:</p> <pre><code>var x = 10; alert(x * x * x); </code></pre> <p>you could use:</p> <pre><code>(function (x) { alert(x * x * x); })(10); </code></pre> <p>and indeed a function like this:</p> <pre><code>function square (x) { // some code ... var result = x * x; return result; } </code></pre> <p>is exactly equivalent to:</p> <pre><code>function square (x, result) { // some code ... result = x * x; return result; } </code></pre> <p>because of the hoisting mechanism in JavaScript that would make the <code>result</code> variable available (but undefined) even before the declaration and assignment in both cases (in the <code>// some code ...</code> part). This is often a source of confusion but is actually quite interesting and extremely powerful.</p> <p>See also my other recently updated <a href="https://stackoverflow.com/questions/5318921/help-understanding-javascript-global-abatement-techniques/5318958#5318958">answer to the question: Help understanding JavaScript global abatement techniques</a> for more info on this subject.</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