why some people write a function like $(function( $ )

Question

I know that code like $(function( $ ) does not make any sense, but I have find this sort of code at various places including todomvc.

There is a reason writing functions like jQuery(function( $ ) to resolve any potential conflict of $ used by any other library, but not $function($).

Answer 1

There is no reason to use

$(function($))...

If you use the dollar sign in the beginning of the line you rely on that it's a jQuery object, so if you pass the jQuery object later on as a parameter to avoid conflicts, why didn't you use it on the first place? It's too later for that now...

The right way to use it is with:

(function($){ // The dollar variable is a parameter.
   $(function(){ // You use the $ variable only inside the function.
   });
})(jQuery); // jQuery is passed as a parameter.

$.somePrototypeFunctionHere(); // Here the dollar variable can be something else.

Answer 2

It's useless

This form is not useful at all:

$(function($) {
});

It will work ONLY if there are no other libraries that could override $ (e.g. prototype).

How it could be useful

Since jQuery passes itself as the first argument to the DOM ready event handler function, this is how you could make good use of it:

jQuery(function($) {
    // this === document
    // $ === jQuery
});

The proof of this behaviour can also be found in the source:

readyList.resolveWith( document, [ jQuery ] );

It maps this to document and the first argument to your ready function to jQuery. The reason why the code looks a bit non-obvious is because the ready event is handled using Deferred.

The equivalent

The somewhat equivalent notation is this:

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

This would be preferred if you're doing more things outside of the ready handler, which actually happens more often than you think.

Answer 3

There are many ways you can initialize jQuery scripts for DOM when it is ready. The popular methods are:

$(document).ready(function(){});

And the short hand for the same is:

$(function(){});

---

Update #1: The $() vs. jQuery() fight!

For the reason of asking jQuery vs. $, the reason is most Libraries use $ as a shorter way to access functions within the libraries. Say, MooTools and Prototype JS. So, to avoid conflict, they might replace $ with jQuery.

jQuery has a function called jQuery.noConflict(); which relinquishs jQuery's control of the $ variable making $ not work with jQuery. Hope this clears your problem.

In the Prototype.JS documentation, the $ symbol returns the element in the document with matching ID; otherwise returns the passed element.

Also, the $ function is the cornerstone of Prototype. Not only does it provide a handy alias for document.getElementById, it also lets you pass indifferently IDs (strings) or DOM node references to your functions.

---

Update #2: For your question on $ as a parameter...

No one uses:

$(function($){})

It is either

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

or

$(function(){});

Please check. :)

Answer 4

Most people that writes $(function(){}) do it because they are users. i.e. They have chosen to use jquery and not any conflicting libraries. Thus it's safe to use it.

Answer 5

$(function( $ ) 

is shorthand for

$(document).ready(function() {

and you are right: Jquery(function( $ ) is used in the event of possible conflicts with jquery and other js libraries

Answer 6

yes because as you might know prototype also use $ so herejQuery is become great which allows us to use jQuery even if $ is preserved by some other lib.

check Here

Using jQuery with Other Libraries

Answer 7

This is the better way to resolve any potential conflict of $:

(function($){
   $(function(){
      // all the code stuff here....
   });
})(jQuery);

Your edit:
My question is actually misunderstood by many giving answers. I want to know about the dollar as an argument in the function.

This is just for securing the $ sign which is shorthand for jQuery and there are many other libraries which also uses the $ sign, so there are frequent chances to get in trouble with this.

read here from the docs:

it's a best practice to pass jQuery to an IIFE (Immediately Invoked Function Expression) that maps it to the dollar sign so it can't be overwritten by another library in the scope of its execution.

(function($) {
     // all other things    
})(jQuery);

Now within that closure, we can use the dollar sign in place of jQuery as much as we like.

More here to read

Answer 8

$(function() { 
  // Do your code here...
}); 

ensures that the document and scripts are fully downloaded.

(function($){ 
  // Do your code here...
})(jQuery); 

enables to use $ symbol in the function without conflicts with other libraries which gives a different meaning to $ symbol.

So you can use both the above together.

(function($){ 
   $(function() { 
      // Do your code here... 
   }); 
})(jQuery);

Answer 9

From ready() | jQuery

Aliasing the jQuery Namespace

When using another JavaScript library, we may wish to call $.noConflict() to avoid namespace difficulties. When this function is called, the $ shortcut is no longer available, forcing us to write jQuery each time we would normally write $. However, the handler passed to the .ready() method can take an argument, which is passed the global jQuery object. This means we can rename the object within the context of our .ready() handler without affecting other code:

jQuery(document).ready(function($) {
  // Code using $ as usual goes here.
});

This are other ways to specify a function to execute when the DOM is fully loaded. It can be done in three ways in jQuery -

All three of the following syntaxes are equivalent:

jQuery(document).ready(function($){})

jQuery().ready(function($){}) //(this is not recommended)

jQuery(function($){})

Another way to resolver conflicts would be -

(function($) { /* some code that uses $ */ })(jQuery)

You may like to read this.

Answer 10

Your question is not clear. Passing JQuery object makes it local scoped (to the module as far as I understand). It is used as a performance enhancement.

(function($) {
  // Code in here
})(jQuery);