a simple question on jquery closure

Question

what does this mean?

(function($){
})(jQuery);

to make the question clearer, what does wrapping a function in parenthesis mean in JS (sorry, I'm a bit confused on the concept of closures). What about the $ parameter? and the "jQuery" in the end parenthesis?

Can I do the same with mootools and combine them in 1 JS file?

(function($){})(jQuery);

(function($){})(mooTools);

I have only worked with jquery and am planning to work with Mootools

Answer 1

the mootools equivalent for namespacing $ is:

(function($) {
    // $ is the mootools one (aliasing document.id)
})(document.id);

you can combine them into one file, but keep in mind that mootools is a prototypical framework and $ only serves the purpose of a selector whereas all functions go into the element/array/class etc prototypes. hence doing this in mootools works:

var foo = $("bar");
foo.hide(); // the element inherits .hide()

but in jquery it will fail and needs to be transcribed as

var foo = $("#bar");
$(foo).hide();

the point is, you can't namespace the stuff that mootools exports into prototypes.

Answer 2

Wrapping a function between parenthesis ensures this function to be evaluated as a function expression.

That happens because the Grouping Operator (the parentheses), can only evaluate expressions.

If no parenthesis are used, it will be interpreted as a function declaration, and it will cause a syntax error, since the function name is not optional for function declarations.

(function(arg){
  alert(arg); // alerts test
})("test");

In the above example, the function expression is automatically executed, passing an argument.

That pattern is heavily used by jQuery plugins, since jQuery can run in noConflict mode, the $ global variable will not be created, so the jQuery global object is passed as an argument of this anonymous function and inside of that function, you can freely refer to it as $ (the received argument).

Keep in mind that also, the function context (the this keyword) inside self-executing function expressions invoked like the above example, will refer always to the Global object.

For a more in-depth info about the differences between function expressions and function declarations, give a look to the following resources:

• Explain JavaScript’s encapsulated anonymous function syntax
• Named function expressions demystified

Answer 3

The main point for doing this is so that objects created within the function's expression can be utilized from properties and methods attached to passed in objects, without exposing those objects publicly. This can aid in preventing variable collisions. It also allows for variables created to be accessed as private storage for anything that is attached..

(function($){
//jQuery is available here as $

var myPrivateArray = []; //this is private

$.addItem = function(item) {
  myPrivateArray.push(item);
}

})(jQuery);


//I can't access myPrivateArray here...
//but I can use jQuery.addItem to add something.

Answer 4

function($) { ... } creates a function that accepts a parameter called $.

Wrapping in in parentheses does nothing.

Adding (jQuery) calls the function with jQuery as a parameter.

---

This is done to make the function independent of $ in the global scope.
When you write $ in the function, you're referring to the parameter $, not the global variable $.

Answer 5

Here is an article on closures: http://www.jibbering.com/faq/faq_notes/closures.html

Basically, as CMS has said, it is a function expression. There is a perfect example to help you better understand about 2/3 of the way down that page.

The jQuery in the last set of parentheses means you're passing the jQuery object to the inner function. That inner function takes the object and it is assigned as $. So, when you're accessing the $ inside the function, you're actually acting upon the jQuery object you've passed.

As for mixing these with jQuery and Mootools, I've never used Mootools so I'm not sure how it assigns itself. The only thing I would think is that if it uses $ like jQuery, you can call jQuery.noConflict(); and reassign jQuery to another variable, maybe var $j = jQuery; Then, you can use Mootools as you normally would.

Answer 6

CMS have given you the correct answer but I just want to add that this is not a closure. This is just the () operator being used to return the result of an expression which in this case is a function expression and the fact that in javascript, a returned anonymous function can be called directly. So this is simply combining both:

var x = (1+1); // <-- () evaluates an expression

and:

var arr = [0,1,2];
arr.push(function(text){alert(text)});
arr[3]('hello'); // <-- function returned by array called directly

And as for the $ parameter, that's just one of the characters that javascript allows for variable names. Your examples is exactly equivalent to:

(function(jQ){})(jQuery);
(function(moo){})(mooTools);