14

I am debugging someone else's JavaScript code and a majority of the code is wrapped like this:

(function ($) {
    //majority of code here...
})(jQuery);

What is going on with the ($) and the (jQuery)? I wasn't taught to code like that and haven't seen them. What is their purpose?

As well, there is no document.ready, but I assume that is because the code is executed right after it's read by the (); at the end?

Adeel
  • 2,901
  • 7
  • 24
  • 34
tsdexter
  • 2,911
  • 4
  • 36
  • 59

4 Answers4

16
var $ = "some value we don't care about";

 // v=====normal plain old function
(function ($) {
 //        ^=======receives jQuery object as the $ parameter

    //majority of code here, where $ === jQuery...

    $('.myclass').do().crazy().things();


})(jQuery);
 //  ^=======immediately invoked, and passed the jQuery object


 // out here, $ is undisturbed
alert( $ ); // "some value we don't care about"
RightSaidFred
  • 11,209
  • 35
  • 35
  • 3
    Okay, so basically the whole point of doing this is so that you can call jQuery with the $() notation inside that function, and outside that function if something else like prototype uses $() notation it doesn't matter?.. So really it just saves you from having to write jQuery() (or some other notation) every time when using no conflict.. makes sense – tsdexter Nov 29 '11 at 03:09
  • 2
    Essentially everything, that is in the `majority of code here ...` bit, is isolated from the rest of the code. It exists in separate scope. If you create `var something = 1` there , it does not end up on global `window` scope. The code outside this structure cannot overwrite anything that is inside. – tereško Nov 29 '11 at 03:10
  • 1
    @tsdexter: Yep, you've got it. The global `jQuery` is referenced by the local `$`, which means the global `$` (if any) can be used for other purposes. In JavaScript, variable scope is created with a function. – RightSaidFred Nov 29 '11 at 03:11
  • 1
    For the record, these are referred to as IIFEs – immediately invoked function expressions. :) – davidchambers Nov 29 '11 at 03:33
  • @davidchambers: Yes, that's a much better description than the still popular "self invoking function" which isn't a proper description of what's happening. – RightSaidFred Nov 29 '11 at 03:43
13

This is useful when you want / need to use jQuery.noConflict(), and the global name $ isn't an alias for jQuery. The code you posted lets you use the shorter $ to mean jQuery inside the anonymous function only, without $ needing to be a global.

millimoose
  • 39,073
  • 9
  • 82
  • 134
3

Just to expand on RightSaidFred's answer a little, when I first saw the ()() syntax I was a bit befuddled, but it made sense once I realised the brackets are being used to define an anonymous function and then call it. e.g:

(function (msg){alert(msg)})('hello');

... defines a function and then calls it, passing 'hello' as a parameter.

So the example in the question:

(function ($) {
    //majority of code here...
})(jQuery);

is passing jQuery into an anonymous function and referring to it as $ within the function, a way of guaranteeing that $ will work for jQuery without interfering with anything else.

Community
  • 1
  • 1
codeulike
  • 22,514
  • 29
  • 120
  • 167
0

This structure is called JQuery Plugin, purpose of the plugins is to create a framework of any common task/function in your project, same-way you can extend your plugins according to your usage in different page or in same page. that way you can avoid repeating the same code everywhere.

check it out http://docs.jquery.com/Plugins/Authoring

manny
  • 1,878
  • 2
  • 15
  • 31
  • That structure isn't a mere jQuery construct. And while it may be used when creating a plugin, it doesn't need to be. jQuery plugins are created by extending `jQuery.prototype`. – RightSaidFred Nov 29 '11 at 14:58