JavaScript Self-Executing Functions

Self-Executing function?

If you never heard of it but you use JavaScript, high chances are that you already used it.
A self-executing function, also known as Immediately Invoked Function Expression (IIFE), is declared as follows:

(function(){ 
  // do something here 
})();

Select all Open in new window

In these 3 lines of code (one of them is actually a comment) there's a lot going on under the hood. Bellow I'll explain what is going on behind the scenes and why/when should we use it.

My definition of self-executing function is:

Self-executing functions are a way to allow the creation of an isolated scope for code that we want to execute right after it's parsed.

Scope, the eternally misunderstood

You may ask, why are we even doing this in the first place, right?

The short answer is: to execute code inside a controlled scope.

If there's something that is often misunderstood, or even completely ignored, is the fact that scope is a key feature of JavaScript. As a functional language, JavaScript doesn't have classes and the only way to declare a private piece of code, is to write it inside its own scope.

Very few instructions create a scope, and functions are one of them and this means that, if you declare a variable inside a function, you won't be able to access it outside that function; for example:

var a = 5;
  function MyFunction(){
  var a = 10;
  return a;
}

console.log(MyFunction()); // prints 10
console.log(a); // prints 5

Select all Open in new window

Scope itself is a complex topic that I'll cover in another article; for now, I'll keep it simple and restrict it to this example.

What the previous code snippet shows is that MyFunction creates a scope for variable a, which allows the internal value to be different from the one declared inside.
So if you want to execute your code in a way that won't interfere with anything else, you should create your own scope for it.

Named vs Anonymous functions

JavaScript supports two types of functions, named and anonymous. By their name, I think you can already imagine the difference; one has a name and the other doesn't :) A named function in JavaScript is defined as follows:

function MyFunction(){
  // do something here
}

Select all Open in new window

and an anonymous function is defined like this:

function(){
// do something here
}

Select all Open in new window

As it shows above, you can call the MyFunction() but you can't call the anonymous function because it has no name. What you can do instead is declare the anonymous function and assign it to a variable, like this:

var MyFunction = function(){
  // do something here
}

Select all Open in new window

In this case, the variable MyFunction will hold a function that you can call with MyFunction(). All good until now? :)

Self-Calling it

Now, remember when I said above that we could not call an anonymous function? Well, what if we don't need to call it? What if it is kind of able to call itself, right after being declared?
By wrapping a function in parenthesis we can then tell the JavaScript compiler to execute it right away, like this:

(function(){
  // do something here
})()

Select all Open in new window

and here we are; we've created our self-executing function!

We can even call the function, passing arguments.
Below is a common example of a technique, more popular in the early days, to avoid naming conflicts with the $.
As jQuery can be used in both ways (jQuery and $), passing jQuery as an argument into your code prevents conflicts with other libraries that could be also using $ as an alias.

(function($){
  // do something here
  // making sure that $ represents jQuery
})(jQuery)

Select all Open in new window

Lesson learned

Next time you have a piece of code that should be executed right away, don't just drop it inside a file or inside a script block, wrap it with a self-executing function!

Happy safe coding!