The need for JS functions which are self executing?

Question

What is the use of functions which self execute?

(function(w,d) {...})(window, document);

And why do they pass window/document which are global variables?

Answer 1

The reasons are:

• We need to create private scope, everything declared inside that function is not polluting the global namespace.
• Keeping code readable with shorter names. This is for your question: why do they pass window/document which are global functions?

Update: add 1 more reason

• Create closure to capture variable inside a loop.

For example:

for (var i=0 ; i< count; i++ ){
  (function(index){
   //do something with current index
  })(i);
}

This is usually the case when you need to do something later on after the loop has finished and still need to have reference to the index. Like attaching click event handlers for a list of objects or using setTimeout

Bonus:

Due to self-executing function's ability to create private scope. There comes Javascript module design pattern. The idea of the pattern is to create a private scope for your private variables and methods (truly private), only public things that are needed to avoid polluting global scope

Answer 2

What is the use of functions which self execute?

This is an anonymous function, which is immediately called. The purpose of this is that if the function doesn't need to be called from anywhere else, you don't clutter up the namespace with making up random names. Such functions are often used as callbacks or event handlers.

And why do they pass window/document which are global functions?

In a page with FRAME or IFRAME tags, or pop-up/open-in-new-window pages, there may be more than one window and document.

Answer 3

Why do they pass window/document which are global functions?

So that inside that function scope window and document will be available as w and d.

One of the common practice of this is included with jQuery plugin development as:

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

Since $ can be used in prototype too, this can create anamolities when mixing two libraries, but inside above function, $ will only represent jQuery but not prototype.

Answer 4

The idea is you pass copies of the global variables so anything you change within the scope of your self-executing function does not affect the external reference. It also allows you to declare global variables within that function which won't clash with existing variables.

In a nutshell, the goal here is to restrict scope.

Answer 5

Self executing functions also called as Immediately-Invoked Function Expression(IIFE) have multitude of uses. The most common ones are:

Prevent pollution (using closure)

Its a better practice to envelope all your code into a function scope to avoid littering the global namespace. "Variables and functions defined within a function may only be accessed inside, but not outside, that context, invoking a function provides a very easy way to create privacy."link

Class-based inheritance design: 

JavaScript has prototypal inheritance. But lot of class-based custom implementations are out there which use self-executing functions [1]

Global and window objects are passed for easier references. Changes to the properties of these objects DO reflect outside too.. The changes you make to w and d does reflect/change outside. These local variables are mere references to the global window and document. Hence, changes made inside the function scope will make global changes! [fiddle]

Answer 6

These are anonymous functions being used as closures returning a function or a collection to functions with access to a set of common captured variables declared in their common parent function closure, not polluting the global namespace and being passed around.

Very basic exemple:

 keepsTrackOfTimesUsedWithoutPollutingNamespace = function()
 {
     var right = 0; 
     var left = 0;
     display = function(){console.log("right got executed " +right+" times and left got executed " + left +" times.\n";}
     return [
          function()
          {
               right += 1; 
               display();
          },
          function()
          {
               left += 1;
               display();
          }
          ]
 }