Self executing functions in javascript

Self executing functions also called as IIFE(Immediately Involked Function Expression) are everywhere. From small plugins or libraries to large-scale applications. What makes them special? As the name indicates they have the ability to execute themselves,even without an explicit call.

How to write self executing functions

Well!! it is easier than you imagine. All you need is a parenthesis. The () operator makes them powerful to execute themselves.
Lets write a simple function and learn step by step.

Quiet easy to understand. We just wrote a message and called it. Ok, now lets start some refactoring of code and get the same result as follows.

In the above code the function printMessage is wrapped in a parenthesis like (printMessage) and immediately we used another set of parenthesis.

Ok what if we substitute the function name with function itself in the above code? That is also possible and it look like follows.

So generally we can say that a code snippet like (...function definition here..)(); executes the same function. This wrapping up prevents inside variables to interfere with global variables. So this wrapping makes private variables inside function accessible within the function only.

Another thing to note here is that it is not a must to wrap the function within parenthesis to make it self executing. You can just use any symbols like ! or in fact some libraries use + symbol. Classic example is shown below.

So what is important here is the () at the end of function definition and not the wrapping parenthesis or the symbols used before the function definition. You can see the above code generates same results as previous ones.

Now think again, do we really need a name for the function? Why cant it be an anonymous function? Yes it is possible as follows.

Passing arguments to self executing functions

To pass arguments to self executing functions, we can use the parenthesis at the end like (ag2, arg2,..). Lets look an example.

You may have seen this pattern used in different JavaScript libraries like jQuery.

Passing window to a self executing function as an argument

If you see the source code of jquery, you can see the code is as below.

By passing window to the function we can set some variables to the global context from within the function. Suppose we want to define a variable foo inside the function and we need to access the variable from outside, we can write the code as below.

Passing undefined to a self executing function as an argument

Another question is why we need to define undefined as the argument? This is because undefined can be assigned to another variables which may cause errors inside the function. For example consider the following code.

So by assigning undefined to true, it is possible to change the expected behavior of undefined inside a function.To avoid this overriding, we dont pass undefined to the function when it is called but instead just define undefined as the function argument. Thus we can ensure any of the overriding of undefined has no effect inside our function and undefined inside our function is undefined itself.

Also the value of undefined or window cannot be changed in a global scope but it is possible inside a function. So the code below shows the normal behavior of undefined.

Some libraries passes document also to the function as argument for the same purpose as above.
And… that is about self executing functions and its special arguments.

Leave a Comment

Your email address will not be published. Required fields are marked *