Ask JW: Decoding Self-Invoking Anonymous Functions

Between Nettuts+ and ThemeForest,
I receive dozens of question emails each week. Although I try my best, I simply don’t have the time to research the answer to each one. Considering this, I’ve decided to sporadically post “Ask JW” articles. This week’s question concerns Javascript’s self-invoking anonymous functions, and comes from Travis.

The Question

“Hi, Jeffrey. I love your “jQuery For Absolute Beginners” series. It’s helped me so much!! Can you explain why I have to add all of that extra information around my function when I create a jQuery plugin? What’s it for, and why is “$” passed as a parameter?
– Travis

The Answer

Hey, Travis. I assume you’re referring to something like the following:

(function($) {
	$.fn.myPlugin = function(){};
})(jQuery);

We do this in our plugins to ensure that the dollar symbol does not conflict with any other Javascript libraries. What if you’re using jQuery and Protoype simultaneously? In such instances, the $ symbol refers to different things.

One possible remedy is to type ‘jQuery’ instead of ‘$’ each time – but this is inefficient and makes for quite ugly code. The solution is to pass ‘$’ as a parameter. That way, within the anonymous function, we have exclusive access to the symbol.

A Simple Example

My guess is that you’re not 100% sure exactly what a ’self-invoking anonymous function’ is. Let’s review a simple example. Consider the following function:

function doSomeAlert() {
 alert('Hello World');
}

As you might have guessed, this function won’t automatically run when the page loads. If we want it to, we need to call it.

doSomeAlert();

Easy enough. Is there any other way to make a function run when the page loads without calling it? Yes; to do so, we’ll wrap our function within parenthesis, and then append one more set – like so.

(
	function doSomething() {
		alert('Hello World');
	}
)();

Now, if you run this block of code in your browser, an alert will immediately be displayed.

How Come?

Notice that second set of parenthesis, just before the closing semi-colon? This set basically means, “Execute!”. We can simplify this code even further by turning our function into an anonymous one.

(
	function() {
		alert('Hello World');
	}
)();

Parameters

Now what if we wanted to pass a parameter to our anonymous function? We can accomplish this by passing it through the second set of parenthesis. Let’s revise the previous function so that it accepts a ‘name’ parameter.

(
	function(name) {
		alert('Hello ' + name);
	}
)('Jeffrey');

Notice how we passed ‘Jeffrey’ as a parameter? This value is then sent to our anonymous function!

Back to jQuery

Let’s refer back to Travis’ question. How can we pass the ‘$’ symbol without it interfering with other Javascript libraries? Let’s use the same method as we just learned.

(
	function($) {
		$.fn.myPlugin = function() {}
	}
)(jQuery);

Now, you should understand that we’re passing the jQuery object as a parameter, which will then be represented by ‘$’. It’s as easy as that!

What are the Benefits of Using Self-Invoking Anonymous Function?

There are plenty. We just demonstrated one usage. Another one would be to accomplish some work without having to create a bunch of global variables.

Additional Resource

If you’re still a bit weary about creating jQuery plugins, I recommend that you review the article and screencast found here.

Hope this answers your question!

• Subscribe to the Theme Forest RSS Feed.

Jeffrey

Hi, I'm Jeff. I'm the editor of Nettuts+, and the Site Manager of Theme Forest. I spend too much time in front of the computer and find myself telling my fiance', "We'll go in 5 minutes!" far too often. I just can't go out to dinner while I'm still producing FireBug errors...drives me crazy. I love jQuery, PHP, MYSQL, CSS, AJAX - pretty much anything.

• An HTML-Friendly Template System using PHP's Output Buffering
• How to Achieve Cross-Browser @font-face Support
• Deleting Multiple Records with PHP