JavaScript Self-Executing Functions

Published on
3,961 Points
1 Endorsement
Last Modified:
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand.
Self-Executing functions are just one good example that I'll try to demystify here.

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:
  // do something here 

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

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

Open in new window

and an anonymous function is defined like this:

// do something here

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

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:
  // do something here

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.
  // do something here
  // making sure that $ represents jQuery

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!
LVL 75

Expert Comment

by:käµfm³d 👽
It should be noted that these are often called "IIFEs":  Immediately Invoked Function Expressions.
LVL 30

Author Comment

by:Alexandre Simões
HI käµfm³d,
you're right, thanks!

I've added it to the article.


Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Join & Write a Comment

This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month