arguments.callee web design & development blog  

No, that's not a typo. (function(){})(); has a lot of punctuation, but that's what it really looks like. It's easier to understand if you break it down:

    (            // 1
        function // 2
        ()       // 3
        {        // 4
        alert("code goes here");
        }        // 5
    )            // 6
    ();          // 7

1. Lets the JavaScript interpreter (browser) know that we want the next few js pieces to act as a group. This is no different than grouping operations in math.
   var mathStuff = (1 + 2) * 3 means to figure out 1 + 2 first.
2. We're declaring an anonymous function. Functions are first-class objects in JavaScript, and in many cases they don't need to be assigned a name to execute.
3. This is the list of arguments for our function, just like a regular function definition function() { ... } In this case there are no arguments, but just you wait...
4. Begins the function body.
5. Ends the function body.
6. Ends the "group" we created in line 1.
7. Inline execution is when you execute a function immediately upon defining it. This works the same way as calling a function named someFunction by typing someFunction();.

Waitaminute... What's the purpose of defining a function if we run it immediately and throw it away? Why not just type alert("code goes here") and avoid that whole squiggly mess?

Scope, that's why. Any variables or functions created in that anonymous function live and die with that anonymous function. A major concept of scope in javascript is inner functions can see into outer functions, but outer functions can't see into inner functions. For example:

    function withInline(){
        var year = (new Date()).getFullYear();
        (function(year){
            var lastYear = year - 1; // hidden from withInline!
            year++; // modifies this inner function's argument only
            alert("next year is " + year); // correct
        })(year); // passing the outer function's variable to the anon function
        alert("this year is " + year); // unchanged
        alert("last year is " + lastYear); // error: lastYear is not defined in this scope!
    }
    
    function withoutInline(){
        var year = (new Date()).getFullYear();
        var lastYear = year - 1; // not hidden
        year++;
        alert("next year is " + year); // correct
        alert("this year is " + year); // incorrect, overwritten :(
        alert("last year is " + lastYear); // correct
    }

Notice both withInline and withoutInline execute the statements in the exact same order. However, the withInline() button will only display two alert boxes, the third one throws an error because lastYear is not visible to withInline, it lives and dies with the anonymous inner function. The withoutInline() button doesn't throw any errors, but the value stored in year is overwritten with next year! The anonymous function construct creates its own scope, or execution context.