Nothing is iffy with IIFE in javascript

IIFE – Immediately Invoked Function Expression (Pronounced: “Iffy”)
Okay now we know what IIFE stands for what is an IIFE and how do we use it?

(function() { })();

You might of seen one before, what it does it scope everything inside itself and when the document loads the () it is executed.

A lot of JavaScript libraries use them but very few people actually use them when writing smaller JavaScript functions.

This might sound a little confusing at first but look at it this way.

function myfunction() {
}
myfunction();

Is the same in operation as:

(function() {
})();

Although the IIFE is also marginally faster, but so marginally you would have to run it millions of times to notice the difference.

So what can we do with an IIFE that is cool?

Well lets look at JQuery, I have not long opened the black box that is JQuery, since it’s release for the first time since oh I don’t know 1.3? and it has changed quite significantly. But it still uses IIFEs!

At the start you will notice the opening goes a little like this:

(function(window,document,undefined) {

and at the end like:

})(this,document);

But why does it do this. Well you have just made a localised version of the window and the document for a start, while not immensely a speed advantage, it means you have your reference to these objects already set, so you don’t need to do:

var mydocument = document;

It’s a shortcut, beautiful and simple.

So what is undefined doing there? Well JQuery initialises itself with undefined incase some clever so and so does something like:

undefined = true;

This would really mess things up when you are checking to see if something is undefined right? The problem is that this is totally valid syntax and while it might not happen, it could throw some weird things in JQuery so it makes its own localised version so no one can tamper with it.

Great we have just seen an IIFE used as a constructor of sorts for JQuery, they can be used in all sorts of ways, like looped calls:

(function myloop() {

// Code to loop here

// Loop this after 1 second more has passed
setTimeout(myloop, 1000);
})();

The beauty of this code is that it will only loop when the code has executed compared to just using set timeout to call a function that does the code to loop, this means you don’t have to worry about the code execution time, it will run 1 second after it has finished running, beautiful and safe.

I have seen other uses of IIFE for example creating false classes, you just need to imagine what you can do and give it a go.

[update]
I have just stumbled across this: Decoding Self Invoking Anonymous Functions

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s