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.
JavaScript by AlexCode
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:
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 10console.log(a); // prints 5
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:
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}
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:
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)
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!
Our community of experts have been thoroughly vetted for their expertise and industry experience. Experts with Gold status have received one of our highest-level Expert Awards, which recognize experts for their valuable contributions.
Comments (2)
Commented:
Author
Commented:you're right, thanks!
I've added it to the article.
Cheers!
Alex