Explains syntax syntax syntax and callback

Question

bit stupid question, maybe.

But I want to understand why the syntax of the self-executing function and the callback it has is so different from the whole JS syntax ..

(function () { })() 

I just need to understand why it is permissible to encapsulate it with () . I would not have guessed that this is true, and then additional () subsequently for the callback (which just sits directly after it, I also did not expect this to be valid.

Can anyone explain this to me?

Answer 1

The function (...) {...} is an expression of a function, that is, an expression representing a function. The only reason it should be enclosed in parentheses in this case is because if the keyword function is the very first thing in the instruction, then the operator is considered the operator of the function, that is, the declaration of the function. (In fact, it does not have to be enclosed in parentheses, it also works to prefix it with + or even put any kind of token in front of the function , which prevents the interpretation of the operator function.)

The part () after the expression of the function coincides with the normal () for calling the function. It:

 (function (...) {...})(...); 

(except for the temporary variable), same thing:

 var f = function (...) {...}; f(); 

which is equivalent to this:

 function f(...) {...}; f(); 

Answer 2

Essentially, external brackets allow you to fully interpret and instantiate a function object, so that as soon as you exit the area of ​​these parentheses, the function object is ready to be called.

Answer 3

Look here:

• Why do you need to call an anonymous function on the same line?

When declaring how you did it, you use it as an expression of a function (the third way to define a function from the link above). As in any expression, this (expression) is evaluated as an expression - parentheses are used where priority must be set. So you can write this, for example:

 var f = function(a) { var s = (((( 1 )))) + (((( a )))); console.log(s); }; ((((( f ))))) (2); 

( live example ) and then remove all unnecessary parentheses with the same result (which is essentially a print of 1 + 2 = 3 ). Result:

 (function(...) { ... }) 

is a function that takes some arguments and has a body that must be executed. It:

 (function(...) { ... })() 

pretty much equivalent to:

 var f = (function(...) { ... }); // Now f is a function that can be called f(); 

Anonymous functions are useful, among other things, for two reasons: they are anonymous (that is, they do not create additional names - see the aforementioned SOq link again), and they are “containers” for other things that do not need to be global.

Answer 4

What you have is an expressive functional expression with an immediate call, also known as IFFE (read iffy), and is a design pattern that creates a lexical scope using the scope of the JS function. They are used to avoid dragging variables, polluting the global environment and at the same time allowing public access to methods, while maintaining local confidentiality of variables declared in the function. The key to understanding this is that JS has a function area, not a block area, and passes values ​​by reference inside the closure. You can read further in Immediately a function expression is called .