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
var mathStuff = (1 + 2) * 3 means to figure out 1 + 2 first.function() { ... } In this case there are no arguments, but just you wait...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.
I'm a Front-End Engineer at Yahoo! working on the Mail and Messenger teams. I blog about web design and development topics including accessibility, usability, performance, and developing HTML / CSS / JavaScript applications on Appcelerator Titanium and Adobe AIR.
If you're a web developer, you might enjoy Jelo, my JavaScript library.
A few panoramic shots I took at SDCC 2010. #geek http://bit.ly/bwX6GB
JS version of Regex prime number checker:
function isPrime(n) {
return Array(n + 1).join("1")
.search(/^1?$|^(11+?)\1+$/) == -1;
}
Погрузился в пучину EcmaScript5, местами увлекательно, местами нудно =)
Modernizr http://ow.ly/18njQ1
A Collection of 20 HTML5 Video Players - a round-up of JavaScript and html5 alternatives to Flash-based media player... http://ow.ly/18njQ2
jQuery TOOLS - The missing UI library for the Web http://ow.ly/18njQ3
Contactable - A jQuery Plugin | the odin http://ow.ly/18njQ4
Giants vs Dodgers, sweet seats. http://twitpic.com/2ag9pa
@snookca That'll be fixed next week. I promise.
@snookca I was tryna not name names ;) But really that was just par for the course today, pretty hectic day. As I'm sure you know.
Who breaks major stuff after 4pm on Friday? On the last day of the sprint, no less. Tsk. (wasn't me)
Awesome live git tracker for teams: http://www.utsup.com/
RT @DerrenBrown: Blog post: Camera Software Lets You See Into the Past http://bit.ly/9kjVg5
10 invites to the new version of Digg: http://bit.ly/dqM8EV
Threaded vs Evented Servers, great look at the whats and whys. http://bit.ly/bDUEjn #geek
Nav, Context menus, "app-style" toolbars in sample chapter http://bit.ly/csTRY8 of new YUI book http://bit.ly/cJINoV
Add a side-mounted End Call button to your iPhone 4: http://bit.ly/cGxPBD #funny #geekAll original work on this site is covered by a Creative Commons Attribution 3.0 license unless otherwise specified.
You may share or use any code or images from this site in any manner, for free, so long as reasonable effort has been made to give credit where due.
The views expressed in the posts and comments on this blog do not necessarily reflect the views of Yahoo!