why are javascript functions like this

Question

Possible Duplicate:
What does this mean? (function (x,y)){…}){a,b); in JavaScript

I am a starter to javascript. I know to write JS userdefined functions. But recently I came across some thing that I can’t recognize. Can anyone explain to me what this is?

(function( window, undefined ) {

    var jQuery = (function() {
    });
           window.jQuery = window.$ = jQuery;
})(window);

What is the meaning of this? When I Google javascript functions I am getting only

function foo(){ 
    alert("This is an alert"); 
}

I know to use these type of functions

Please take a look at [**this answer**](http://stackoverflow.com/questions/5305634/jquery-question-what-does-it-really-mean/5305786#5305786) I posted some time ago. — rsp, Sep 23 '12 at 03:02
Check out [Ben Alman's comprehensive article](http://benalman.com/news/2010/11/immediately-invoked-function-expression/) on these functions. — Joseph Silber, Sep 23 '12 at 03:02

score 4 · Accepted Answer · edited May 23 '17 at 12:27

Short answer: Those are immediately invoked functions that provide lexical scope and closures.

For a better explanation please take a look at this answer I posted some time ago.

UPDATE:

Lexical scope means that variables declared within a function won't be visible outside of the function body.

Closure is a way to keep references to variables that would otherwise be out of scope, because if they were in scope where the function body was defined then it is available to any subsequent invocation of that function. See: Closure on Wikipedia.

UPDATE 2:

If you really want to understand all of these then I strongly recommend watching the 1986 Structure and Interpretation of Computer Programs MIT lectures by Gerry Sussman and Hal Abelson (available on YouTube). In my opinion there is no better way to truly understand JavaScript than watching those very lectures, even though they are not about JavaScript. You will quickly see which language was really the inspiration for Brendan Eich when he designed JavaScript. Hint: It was not Java.

oh thanks, the function will be executed as soon as it is defined , can you explain me what the terms lexical scope and closures. — Kajal, Sep 23 '12 at 03:05
Each function in JavaScript technically forms a closure. It's not a characteristic of immediately executed functions. — Felix Kling, Sep 23 '12 at 03:09

Gung Foo · Answer 2 · 2012-09-23T03:34:28.890

3

It is a Function that executes itself, also called a module pattern.

It is often used to introduce public and private namespaces since attributes defined on the inside of said function are not accessible from the outside while attributes you return are.

For example, if you return an object, you can then treat the function as an object like this:

var a = (function() {
  var a= 0; // this is only accessible inside this function
  var b = {
    a: 1 // this will be returned and therefore be accessible on the outside
  };
  return b;
})();

console.log(a.a); // outputs 1

edited Sep 23 '12 at 03:34

answered Sep 23 '12 at 03:06

Gung Foo

13,392
5
31
39

No, it doesn't execute itself. The function cannot even name itself, because it is anonymous and never stored in a named variable. – Ben Voigt Sep 23 '12 at 03:33
+1 for hinting why this pattern is used. – Geoffrey McGrath Sep 23 '12 at 03:39

prashanth · Answer 3 · 2012-09-23T05:18:08.953

The following is a function statement. It can exist alone.

function foo(){ 
    alert("This is an alert"); 
}

It can be 'called' (executed) like this:

foo();

The following is a function expression (such as anonymous function ** see edit at the bottom **). As any other expression, it is like an rvalue, you can assign it to a variable

var f = function (){ 
    alert("This is an alert"); 
};

which, then, can be 'called' (executed) like this:

f();

or you can use operators over it like this:

(function (){ 
 alert("This is an alert"); 
})();

And note that this variable can now be passed as parameter to other functions! (i.e. we can pass functions as parameters).

Now, lets analyze this:

(function( window, undefined ) {
    //blah blah blah -1
    //blah blah blah -2
})(window);

this can be broken down into two:

var f = function( window, undefined ) {
    //blah blah blah
};
f(window);

The function (assigned to f) takes 2 parameters, window and undefined. We are passing the 1st parameter as window (which will be provided by the browser to the caller; it's a global object). Note that we are not passing any 2nd parameter. But since we are expecting 2nd param in the function but not passing any, the Javascript interpreter will assign an undefined value (as defined in the interpreter) to it. So the variable (parameter) undefined now contains undefined.

The main purpose of accepting these two values as parameters is to make the function independent of the global variables. (Just imagine what would happen if some JS script or a browser plugin changes undefined to something else!!)

Refer: https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Functions https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Expressions_and_Operators

EDIT:

As @FelixKling commented, function expressions need not be anonymous, they can have names.

var f = function foo(){ 
    alert("This is an alert"); 
}

This is an interesting article about their usage.

For completeness: Function expressions don't have to be anonymous, they can be named: `var foo = function bar() {...};`. — Felix Kling, Sep 23 '12 at 03:58

why are javascript functions like this

3 Answers3