CODEWITHSUNDEEP
javascript
Not John Skeet
Not John Skeet

Reputation: 337

What does a plain old (function() { ... }) mean exactly?

I see some JavaScript files that set up dropdown menus and such and they have everything wrapped in (function() { ... }). I'm wondering how that is different than having them not wrapped in an anonymous function. For instance, how is

$('#someElement').click(alert("Hi!"));

inside a JS file any different than 

(function() { 
   $('#someElement').click(alert("Hi!"));
});

???

Upvotes: 2

Views: 378

Answers (3)

Domino
Domino

Reputation: 6768

You probably confuse it with this common syntax, as others mentionned:

(function(){
    // code here
}());

The first and last parenthesis don't do anything in this code, but it's used by people to avoid confusion. It's a closure. In other words, it creates an anonymous function and runs it immediately, creating a local namespace. Any variable declared within this function will stop existing afterward.

The function declaration syntax is:
function nameGoesHere (parameters, go, here) { /* code goes here */}
Written like this, it almost translates to:
nameGoesHere = new Function("parameters", "go", "here", "/* code goes here */");
The only difference being that the function instance itself also keeps track of its name when written with the function keyword.

When you write (function(){/* code here */}());, you don't give any name to the function, so all you really do is: (new Function(/* code here */)());. Let's represent the returned function as the word "anonymous". This line becomes (anonymous());, which executes the anonymous functions. And then you're left with extra parens which were only there to make it clear for people reading the code that this was a closure from the start.

If, on the other hand, you saw:

$(function(){
    // code here
});

That calls the $ function added by jQuery, which executes the code inside it when the page is fully loaded.

Upvotes: 1

Mathias Vonende
Mathias Vonende

Reputation: 1380

First of all: I think you forgot the parameter-paranthesis (function(){})() -- the last ()-s. Otherwise this would make no sense, as an anonymous function-definition without exeuction is meaningless.

(function(){})() is an anonymous function, that is executed immediately. This defines an anonymous context (or namespace) for everything that is insinde the function definition.

This has the benefit, that functions and variables defined inside do not clutter the global namespace. Everything defined insinde has also the benefit of full access to all variables on the inside, while beeing hidden from the outside. Constructs with this functionality are called a closure, which is why this construct is also known as 'anonymous closure'.

Upvotes: 3

Quentin
Quentin

Reputation: 943142

The second example defines a function expression and never calls it.

It doesn't call it immediately (and if it did, there are no local variables inside it so it wouldn't be any different from the first example).

It doesn't pass it to another function (such as the jQuery dollar function — $(function () { ... })) — as a callback. It doesn't assign it anywhere to call later.

Consequently, the second example does nothing at all.

It is possible that you have some other code which reads in the source code which includes those statements and does something with it, but if so, you haven't shared enough of your code to see what.

Upvotes: 0

Related Questions