Can someone explain what the function ($) does in jQuery

Question

I recently read another user's code and came across this:

// Semicolon (;) to ensure closing of earlier scripting // Encapsulation // $ is assigned to jQuery ;(function($) { // DOM Ready $(function() { ... }); })(jQuery); 

I understand the lead point, and I understand that $ (function () {matches the document, but what's the point of adding a function ($)?

I understand this is a closure, but since it is always invoked globally, it seems you don’t need to worry about it. The $ (function () {function will use the same global object anyway, no?

Protect from something, or is it best practice for another reason?

Answer 1

This is the general structure for the jQuery plugin. It protects against the identifier $ , which has been overwritten and used for something else. Inside an anonymous function, $ always refers to jQuery.

Example:

 $ = "oh no"; $(function() { //Big problem! //DOM ready }); 

By introducing a new scope, you can make sure that $ refers to what you expect from it:

 $ = "oh no"; (function($) { //New scope, $ is redeclared and jQuery is assigned to it $(function() { //No problem! //DOM ready }); }(jQuery)); 

The main reason for this is because many other JavaScript libraries use $ as an identifier (e.g. PrototypeJS). If you want to use Prototype and jQuery, you need to provide the prototype with your $ identifier, but you probably do not want to write jQuery every time you want to call the jQuery method. Introducing the new scope, you allow jQuery to have $ in this execution context.

Answer 2

The sample code you provided is an example of a self-running function:

 (function(){ // some code… })(); 

The first set of parentheses defines a function: (anonymous function enclosed in parentheses)

 (function() {}) 

This defines an anonymous function. He does nothing by himself. But if you add a set of parentheses () after the definition, it will be the same as the parentheses used to call the function. Try it:

 (function(message) { alert(message); })("Hello World"); 

This creates a function that takes a parameter and displays a warning window containing the value provided. Then he immediately calls this function with the parameter "Hello World".

---

Your example defines a self-starting function. It takes a parameter called $ . The function is then immediately called with a jQuery reference passed as an argument.

This is common if you want jQuery to work in noConflict() mode (which removes the global reference to $ ).

In noConflict() mode, you can still access jQuery through the jQuery global variable, but most people prefer to use $ , so this self-awareness function takes the jQuery global variable as a parameter named $ as part of a function that leaves you the option to use the $ shortcut inside the self-running function when jQuery runs in noConflict () mode to avoid collisions with other libraries that use $ in the global scope.

Hope this answers your question!