Create a self-executing function expression

Put a code like this first

The correct code
var foo= function() {  // functions content               };foo ();

Everyone is familiar with this code, creating a function expression and executing it immediately. Next, we try to simplify the code to become an immediate execution function expression.

The wrong code
function() {    // functions Contents } ()

This code is different from the above code is to omit Foo, directly replaced with function, but it is obvious that this is not possible, JS will give us a mistake.

Why is this error? In fact, the reason is very simple, the function declaration begins with the function keyword, and there is a very important requirement for the declaration of functions, that is, the function name after functions functionname cannot be omitted.

, and the function name here is omitted, so there is a natural error, so how can we change it? Add a functionname function name in the back. All right, let's try it.

// the wrong code function foo () {    // function Contents } ()

In fact, even if you add the name of the function after the code is still not normal execution, JS will give us an error "syntaxerror:unexpected token", what does this error mean? I myself try to write only one () in JS,

Then execution, found also will eject the error, so, I suspect the above code is parsed into such

// the wrong code function foo () {    // function contents };();

That is, JS inside the function declaration and the last execution bracket parsing, and because there is no expression in the following (), so JS will pop up the error, not normal execution. So is it possible to solve this problem when we try to add a related expression to it later?

// the wrong code function foo () {    // function Contents } (1)

At this time, we added "1" in the back, then, the code does not error (Note: Do not report the error does not mean that the function is executed successfully), and then the egg, because the function inside the functions of the content is not executed, that is, the purpose of our first:

// the correct code var foo= function() {  // functions content               };foo ();

This code optimization is not successful, so this time, we try to change another way of thinking to try. Since the function declaration cannot be executed immediately, can we try to convert the function declaration into a function expression and then try to invoke it immediately?

Speaking of which, we're going to pull the switch between the function expression and the function declaration.

 function foo () {}    // This is obviously a functional declaration var foo= function() {}    //  It is also obvious that a function expression // emphasis is coming ! function foo () {}    // This is a functional expression (functions foo () {})    // This is also a function expression

The first and second examples are easy to understand, but may not be as easy to understand for the 34th one. Why is the last two functions an expression?

In the case of JS Parser, if a statement starts with the function keyword, then the parser will use it as a functional declaration. So, if we add other elements in front of the function keyword, we can convert the functions declaration into a function expression.

So

! function foo () {}     // One in front! operator, so parse into a function expression. ( function foo () {})// adds a () grouping operator and eventually resolves to a function expression. 

So, let's go back to the previous question, for the first time, the error code

// the wrong code function () {    // function Contents } ()

We're trying to turn it into a function expression, not a function declaration.

// This is the right demo (function() {    // functions Content }) ()

It turns out that after adding a () grouping operator in front of the function, the execution effect is the same as the code that was posted at the beginning of the full text.

This code is also a piece of code that we often use to create anonymous immediate execution functions to ensure that global variables are not contaminated.

In fact, in addition to the above way, there is a similar method can also achieve the same effect

// the right demo (function() {    // functions Contents } ())

And the two methods are also different, as to what the difference you can check it out, this article no longer talk about, and finally hope to help people who need.

Create a self-executing function expression