How to understand this jquery function

Question

What does it mean?:

 (function($){

  })(jQuery);

And what reason to use it? Thanks.

The reason to use it: http://stackoverflow.com/questions/5373278/variable-shadowing-in-javascript — Johan, Aug 10 '13 at 11:48

score 2 · Answer 1 · answered Aug 10 '13 at 11:34

2

You are creating a new scope in javascript by using a function (as {} does not create a new scope). Then you are immediately calling this function and capturing JQuery from the outer scope and make it available inside as the variable $

answered Aug 10 '13 at 11:34

basarat

261,912
58
460
511

not exactly true. There's also `with` and one other I don't remember. – John Dvorak Aug 10 '13 at 11:37
Yes it does. Updated answer :) – basarat Aug 10 '13 at 11:39

score 2 · Answer 2 · answered Aug 10 '13 at 11:52

It's a Self Executing Closure(self executing function).

Here you pass jQuery to this self executing function, that maps jQuery to dollar sign. Thus it can’t be overwritten by another library in the scope of its execution.

You will need to write such syntax, while writing a new plug-in, as you prefer to encapsulate your code inside seperate namespace

Suresh Atta · Answer 3 · 2013-08-10T11:52:56.090

1

(function($) {
  $(function() {
    // more code using $ as alias to jQuery
  });
})(jQuery);
// other code using $ as an alias to the other library

Revert the $ alias and then create and execute a function to provide the $ as a jQuery alias inside the function's scope. Inside the function the original $ object is not available. This works well for most plugins that don't rely on any other library.

edited Aug 10 '13 at 11:52

answered Aug 10 '13 at 11:33

Suresh Atta

120,458
37
198
307

score 1 · Answer 4 · answered Aug 10 '13 at 11:36

1

It is a self executing anonymous function. This function execute itself as it loaded.

It means :

// but execute itself
function ($) {
   // to-do
}

answered Aug 10 '13 at 11:36

Ashwani

3,463
1
24
31

score 0 · Answer 5 · answered Aug 10 '13 at 11:43

Passing $ to function prevents confliction from other libraries like,

<!-- Using the $ inside an immediately-invoked function expression. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
   jQuery.noConflict();
   (function( $ ) {
       // Your jQuery code here, using the $
   })( jQuery );
   //Passing jQuery from here prevents $ variable which is also used by prototype
</script>

Read avoid-conflicts-other-libraries

How to understand this jquery function

5 Answers5