What are the different ways to write IIFE? What are their use cases?

Question

I started reading this book. Chapter 2 says that there are different ways to record IIFE:

!function (){}() ~function (){}() +function (){}() -function (){}() new function (){} 1,function (){}() 1&&function (){}() var i=function (){}() 

The author says:

Each manifestation has its own unique qualities and advantages: some with fewer bytes, some more safe for concatenation, each valid and each executable.

I am new to JS. I know what IIFE is, but what do these IIFE forms do?

Answer 1

Why is this?

Before moving on to the list, let's start with "Why is this at all?"

Answer: save any variables and function declarations inside the private function. This is usually done in order to avoid global bindings (the exclusion of global variables is a good idea from ^TM ). For instance:.

 +function() { function foo() { /* ... */ } foo(); var answer = 42; }(); 

Thanks to IIFE (called the scope function in this context) foo and answer are not global. They are private to the code inside the function if they are not exported in any way.

You can do this, even if not in a global area, simply so as not to pollute any area in which you are located.

IIFEs generally have other uses, but the style you quoted is usually used to define scope.

Examples

The author sharply exaggerates the case when "everyone has their own unique qualities and advantages."

If you do not use the return value, they are all the same:

 !function (){}() ~function (){}() +function (){}() -function (){}() 1,function (){}() 1&&function (){}() 

The code inside them is launched as part of the function.

We can also add them to this list:

 (function(){}()) (function(){})() 0||function (){}() 1^function(){}() // any binary math operator in place of ^ also works 

Of course, 1 in all of the above is not special. For most of them, there can be any number (or almost any other), but the one that uses && will not work with 0 , "" , null , undefined , NaN or false (the function will not be launched). Similarly, with 0||... works until the value starting with it is false.

In that:

 var i=function (){}() 

... The only difference is that it declares a variable i that stores the return value. That, of course, can be a big difference. Consider this more obvious version:

 var MyPseudoNamespace = function() { // ... return { /* nifty "namespace" stuff here */ }; })(); 

Finally:

 new function (){} 

This creates a new object, and then calls the function with this set to the new object. If you do not use this inside a function, this is completely pointless. If you do this, well, whether it is useful depends on what you do with this .

---

Note. If there is any possibility of code that you do not control immediately before your browse function (when you combine and reduce files, for example), it is best to start all of these off. using ; , eg:

 ;!function (){}() ;~function (){}() ;+function (){}() ;-function (){}() ;1,function (){}() ;1&&function (){}() ;(function(){}()) ;(function(){})() ;0||function (){}() ;1^function(){}() // any binary math operator in place of ^ also works 

Some of them are technically in need , but most of them do. Their side effects cannot be subtle or catastrophic. Consider:

Code before code:

 obj.prop = function() { // Do something big and awful } 

Then your code:

 (function(){}()) 

Automatic semicolon will not fit! Result? the obj.prop function receives obj.prop is called , and our IIFE is passed to it as an argument. This will make it more obvious:

 obj.prop = function() { // Do something big and awful }(function(){}()) 

See how these () call the function now?

Similarly:

 obj.criticalValue = 42 

then

 +function(){}() 

Suddenly criticalValue got messed up. What for? Because:

 obj.criticalValue = 42+function(){}() 

Doh!

The presence of several ; the line is harmless, so if you start with one, you are less likely to run into problems.

Answer 2

This is an optimization for combining several files into one. The idea is, if the last line of the previous file does not end with a new line, then the first line in this file begins in the middle of the line.

Add things like ; before the function allows it to still work correctly.