15
(function ($, undefined) {

    . . .

})(jQuery);

I see this everywhere, but I don't understand why we're sending jQuery as a parameter in a self contained function. jQuery is already being referenced. Also, why are we defining undefined as a parameter?

BenR
  • 2,791
  • 3
  • 26
  • 36
  • 8
    You're passing it in so that inside you can use `$` without fear of some other library overriding it. looking for duplicate. the undefined portion helps with minification if you compare against undefined, otherwise i don't know – Kevin B Apr 01 '14 at 19:24
  • This answer will help in understanding why `undefined` is passed. http://stackoverflow.com/questions/2716069/how-does-this-javascript-jquery-syntax-work-function-window-undefined – Jonathan M Apr 01 '14 at 19:26
  • Unless you're writing plugins or code that others might use, this isn't really neccessary if you have control over your project and know what goes where, but it does help a little with minification (the undefined argument). Note that it's not a DOM ready function, and `jQuery(function($) { ...` does the same thing with an added DOM ready handler – adeneo Apr 01 '14 at 19:28
  • 1
    Sometimes the neighbors break things. – Travis J Apr 01 '14 at 19:31

3 Answers3

16

Passing $ to the anonymous function ensures that the namespace is protected (i.e. does not conflict with other libraries that also use the $ shortcut).

Oftentimes, undefined is passed to a function to ensure that the variable is truly undefined. For example, consider the following code exerpt:

undefined = '123';
if(myVar == undefined)
{
    // Will only ever execute if myVar == '123'
}

As noted in the comments though, unless you're writing a plugin or some such, using jQuery(function($) { }) is probably a better approach, since it protects the $ shortcut and also provides a DOMReady event, meaning less code is required to achieve the same result.

If you need to check against undefined, you might also want to consider using $.noop().

BenM
  • 52,573
  • 26
  • 113
  • 168
  • What's the point of `$.noop()` for that? Sure an empty function returns `undefined`, but `void 0` is shorter and more efficient, and the intent is more clear (as the [void operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void) always returns `undefined`). – Fabrício Matté Apr 01 '14 at 20:08
  • Yes, I agree. But my pointing out of `$.noop()` was simply a case in point that it's completely unnecessary when using jQuery to pass in `undefined`, you're right about the implications of it, though. – BenM Apr 01 '14 at 21:29
  • 2
    Nowadays, ES5-compliant browsers don't allow overwriting the global `undefined`. Anyway, even when considering older browsers, having the global `undefined` overwritten usually indicates some serious problem which shouldn't be allowed in a sane environment. – Fabrício Matté Apr 01 '14 at 23:16
4

It's possible that $ or undefined might have their values changed by subsequent code, eg. if you're mixing multiple JS libraries, or using multiple versions of a library. By capturing your own copy of $ and undefined, you guard against that.

RichieHindle
  • 272,464
  • 47
  • 358
  • 399
0
(function ($, undefined) {

    . . .

})(jQuery);

with that you'll be sure that $ is jQuery inside the function(whatever jQuery is in your script). It doesnt prevent you from overwriting jQuery variable though,so use it only if you really need it( or you are creating a plugin and distributing a jquery plugin).

As for undefined,it will force undefined to actually be undefined,as undefined can be overwritten in some js engines.

mpm
  • 20,148
  • 7
  • 50
  • 55