Troubles with (function(){})() [duplicate]

I've seen people pass objects as params, but when DOES it make sense? For example, what does it mean?

( function(window) { })(document); 

The language does not treat parameters to immediately called functions differently than parameters to other functions.

It makes sense to use a parameter whenever you want a local name in your function body for an input. In this case it's a bit confusing since window and document are likely to be confused.

( function($) { //some code of widget goes here })(Jquery); 

This makes inner code visible outside the function, right? (not sure) Why, this is because we can access the object (say we have "modal" widget), simply by calling it,

No. It does not by itself make any code visible outside the widget. It's just a parameter definition which provides a new&local name for a global variable.

What makes inner code visible outside is attaching it to an external object as in

$.exportedProperty = localVariable; 

which is a common convention in jQuery code.

on your first question, I dont think you seen window and document but something more like:

(function(doc) { var fubar = doc.getElementById("fubar"); // === document.getElementById("fubar") })(document); 

you have a self-invoking function (or closure) with arguments like any function:

var b = function(str) { alert(str); } b('hi there') //alert('hi there'); 

the same thing is it with the code above, but we are just calling the method at once we created it.

the other code you have:

( function($) { //some code of widget goes here })(Jquery); 

is to reserve the $variable inside the metod to refer to the jQuery object, this is very handy if you have more frameworks or replaced the $ object with something else, everything inside that method with an $ will refer to the jQuery object and nothing else(if you don´t replace it inside your code).

the code:

$(function(){ $("#some_div").modal(); //here it's object the we got from the function }); 

is calling jQuery and its a shortcut for $(document).ready

it will call the method:

function(){ $("#some_div").modal(); //here it's object the we got from the function } 

as soon as the DOM is ready

The pattern is called a closure. It makes sense to use when a module or function:

1. wants to avoid polluting globally-scoped variables
2. wants to avoid use globally-scoped variables and avoid other code polluting them

For an example of each, first take this pattern:

(function(window) { // ... })(window); 

Everything inside the closure will be able to use window as if it were a local variable.

Next, take the same pattern using the JQuery symbol:

(function($) { // ... })($); 

If you have some code that relies on a symbol/namespace like $, but another module reassigns that, it can screw up your code. Using this pattern avoids this by allowing you to inject the symbol into a closure.

Whenever you pass an argument to that wrapping function it's so that you won't mess up with any other libraries or global variables that may be present in your application.

For example as you may know jQuery uses $ as a symbol for calling itself, and you may also have another library, that will also use $ for calling itselt, under this condition you may have trouble referencing your libraries. so you would solve it like this:

(function($){ // here you're accessing jQuery's functions $('#anything').css('color','red'); })(jQuery); (function($){ // and in here you would be accessing the other library $.('#anything').method(); })(otherLibrary); 

This is specially useful when you're making jQuery or any other kind of library plugins.

What it does is allow you to use the $ variable inside your function in place of the jQuery variable, even if the $ variable is defined as something else outside your function.

As an example, if you're using both jQuery and Prototype, you can use jQuery.noConflict() to ensure that Prototype's $ is still accessible in the global namespace, but inside your own function you can use $ to refer to jQuery.