JavaScript notation: (function() { ... } )();

Question

Possible Duplicate:
What is the purpose of wrapping whole Javascript files in anonymous functions like “(function(){ … })()”?

Hello all,

I have seen several JavaScript files using this notation:

Start of JavaScript file:

(function() {
 // All functions go here. 
 // Can someone say what the wrapping nameless function is used for?
})();

Also with the prototype library, this seems possible:

function $() {
 // Prototype $-wrapping function.
}

Can someone please explain the above two code fragments, their uses and their differences? Some keywords which would help me find more about this notation/technique (how it is named) would be helpful too so I can run a Google search on it... :)

Thanks!

Possible duplicate of http://stackoverflow.com/questions/2421911 — Gumbo, Mar 10 '11 at 08:56
Definitely a duplicate of above, and I believe a MUCH BETTER explanation than any of the below. — necromancer, Mar 10 '11 at 09:02
That one also contains interesting information, thanks Gumbo. I will also read the answer in that other thread! I ran a search before posting this one, but wasn't exactly sure what to use as keywords to find a similar question. :) — Sander, Mar 10 '11 at 09:02
you might find interesting the [10 Things I Learned from the jQuery Source](http://paulirish.com/2010/10-things-i-learned-from-the-jquery-source/) — Nick Dandoulakis, Mar 10 '11 at 09:04
@Sander: Please let me know if this question is still relevant so that I can close it as a duplicate if it’s no longer relevant. — Gumbo, Mar 10 '11 at 09:05
@Gumbo, this thread also contains interesting answers. If closing it means that it also will be deleted, please keep it open as I would still like to study the answers :) Otherwise, I think it can be closed. Nevertheless this was very helpful! — Sander, Mar 10 '11 at 09:09
@Sander: No, closed answers won’t be deleted as far as I know. You can even [search for closed questions only](http://stackoverflow.com/search?q=closed%3A1). — Gumbo, Mar 10 '11 at 09:16

score 6 · Accepted Answer · answered Mar 10 '11 at 08:46

In your first example, people surround their code in an anonymous function for scoping reasons, to avoid global namespace cluttering. That weird parentheses syntax is used to define and execute the function all in one step; the () at the end has the meaning of executing the function itself.

So inside that anonymous function you could define function apple(){} and it would only be accessible inside that anonymous function. This is good if you're making a library and want only certain things to clutter your global namespace.

Your second example is just a simple function called $. Many libraries like to use this name because it's short and concise, and since you need to type it every time you want to reference the libraries namespace, the shorter, the better.

score 3 · Answer 2 · answered Mar 10 '11 at 08:47

3

I searched for "javascript wrapping function" and the first hit was this, which says:

This method doesn't add any new symbols to the global or LIB spaces.

I don't understand the second part of the question: function $() { ... } isn't a "nameless" function: it has the name $! If you like functions named $ it's the most straightforward way I know of to make such a thing.

answered Mar 10 '11 at 08:47

Ken

613
4
6

Overlooked that it indeed not is a nameless function, my bad :) Editted in my question. – Sander Mar 10 '11 at 08:49

score 3 · Answer 3 · answered Mar 10 '11 at 08:49

An annonymous function is defined

function() {
}

and then immediately called

()

The extra () enclosing the function is to force the interpreter to treat the function as an expression. Javascript treats any statement starting with the function keyword as a declaration so it could not otherwise be immediatly called.

The purpose is to avoid polluting the global namespace. All variables defined in the function will be local to the function.

Google for module pattern.

score 2 · Answer 4 · edited May 23 '17 at 11:47

2

retracted in favor of answer to: What is the purpose of wrapping whole Javascript files in anonymous functions like “(function(){ … })()”?

edited May 23 '17 at 11:47

Community

1
1

answered Mar 10 '11 at 08:50

necromancer

21,492
19
65
111

score 1 · Answer 5 · answered Mar 10 '11 at 08:52

1

First one is called immediate function. You can read more about this function pattern here.

answered Mar 10 '11 at 08:52

yojimbo87

59,764
22
119
130

JavaScript notation: (function() { ... } )();

5 Answers5