---
description: >-
  https://sarfraznawaz.wordpress.com/2012/01/26/javascript-self-invoking-functions/
---

# Javascript Self Invoking Functions (ok)

## Javascript Self Invoking Functions

* [35 Comments](https://sarfraznawaz.wordpress.com/2012/01/26/javascript-self-invoking-functions/#comments)

In this article, I will discuss self-executing or self-invoking functions of javascript and their hidden power with real-world example. We will also see why using **setInterval** is bad in **some** situations and should be avoided. Let’s explore little used but extremely powerful self-invoking functions of javascript.

#### **Self-Invoking Anonymous Function**

A self-invoking anonymous runs automatically/immediately when you create it and has no name, hence called anonymous. Here is the format of self-executing anonymous function:

| 123 | `(function(){ // some code…})();` |
| --- | --------------------------------- |

You must be aware of the fact that javascript functions run immediately when you put **()** after their names eg:

| 1 | `doStuff();` `// this will run immediately` |
| - | ------------------------------------------- |

And:

| 1 | `doStuff;` `// this will not run immediately and can be used as callback` |
| - | ------------------------------------------------------------------------- |

Now because **()** exist at the end of self-executing anonymous function above, it will run immediately.

Interestingly, if you look at the [source code of jQuery](http://code.jquery.com/jquery-1.4.4.js), you will see that everything is wrapped in between:

| 123 | `(function( window, undefined ) { // jQuery code})(window);` |
| --- | ------------------------------------------------------------ |

That is as can be seen also a self-executing anonymous function with arguments. A **window** (and **undefined**) argument is created and is mapped with global **window** object at the bottom **(window)**.

Notice that you can also write self-executing anonymous function like this:

| 123 | `(function(){ // some code…})();` |
| --- | --------------------------------- |

Using extra braces like before **function** keyword is simply coding convention and is used even by famous javascript libraries such as [jQuery](http://jquery.com/) and also recommended by [Douglas Crockford](http://www.crockford.com/). If you are confused about that extra pair of braces, here is another easy to remember notation:

| 123 | `!` `function(){// some code…}();` |
| --- | ---------------------------------- |

Notice the addition of **!** before **function** keyword, it is essentially same in functionality to previous notation and also recommended (used by twitter too), quoting [docs, section 12.4](http://www.ecma-international.org/publications/standards/Ecma-262.htm):

> An _ExpressionStatement_ cannot start with the `function` keyword because that might make it ambiguous with a _FunctionDeclaration_.

#### Self-Executing Function

Self-Executing function is a **named** function that runs immediately. Example:

| 123 | `(function` `foo(){ // some code…})()` |
| --- | -------------------------------------- |

Notice that now that we have named our function **foo**, it is not an anonymous function though it still is self-executing function because of **()** at the end.

#### How do they run automatically?

This can be best explained through an example. Let’s say in your webpage you have this javascript code:

| 123 | `function` `showUp(){ alert(’Hello There’);}` |
| --- | --------------------------------------------- |

When you visit the page, the showUp function will not get triggered unless you do so by calling the function:

| 123456 | `function` `showUp(){ alert(’Hello There’);}` `// run the functionshowUp();` |
| ------ | ---------------------------------------------------------------------------- |

However, you can make the function auto-run by making it self-executing function like this:

| 123 | `(function` `showUp(){alert(’Hello There’);})()` |
| --- | ------------------------------------------------ |

#### Where to use self-executing functions?

One obvious situation is when you want to auto-run a function like I showed in above example but that is trivial. If you are in a situation where you want to run a piece of code repeatedly like updating something in the database based on user interaction or fetching records from database every 10 seconds or you want to load new stories via ajax similar to how facebook does on its homepage or some other similar situation, one would normally go for setInterval function something like this:

| 1 | `setInterval(doStuff, 10000);` |
| - | ------------------------------ |

Above, doStuff function will get called every 10 seconds. That is the normal approach most developers seem to go with. However, there is a huge problem with that. The setInterval will call doStuff function exactly at specified time of 10 seconds again and again irrespective of whether doStuff function actually finished doing what it is supposed to do. That is bad and will certainly get you into unexpected results.

That is one example of where **setInterval** is ^bad^ and should be avoided.

This is exactly where self-executing functions come in handy. We can do the same task with the help of self-executing function along with setTimeout like this:

| 123456 | `!` `function` `foo(){ // your other code here` `setTimeout(foo, 10000);` `}();` |
| ------ | -------------------------------------------------------------------------------- |

This code will also repeat itself again and again with one difference. setTimeout will never get triggered unless doStuff is finished. A much better approach than using **setInterval** in this situation.

[**You can see the example in action here.**](http://jsbin.com/usali4)

Another more common use of self-invoking functions is **data privacy**, everything wrapped in them is only available within the scope of these functions.
