立即调用 Function 中的表达式 javascript

Question

What is the reason of putting ( ) in the end for Immediately Invoked Function Expression in javascript

(function() {
    // Code that runs in your function
})( /* this parenthesis in the end */ )

Answer 1

An Immediately Invoked Function Expression is a:

(function() {... }) ← Function Expression which is Immediately Invoked → ()

To elaborate, (function() {... }) is merely defining the function, and a function which is defined but never called is doing absolutely nothing.

In order for the code in the function to be executed, it needs to be invoked (often referred to as calling the function). That is why you wrap the function definition in parentheses (making it an expression that evaluates to a reference to the function) and then immediately invoke (or call) the function with any arguments () - or no arguments as in your sample.

It is more or less equivalent to doing this:

const someFunc = (function() { ... }); //merely assigns a function, the code inside doesn't run
someFunc(); //invokes the function (but in this case it isn't immediate)

except in this case you've bound the function reference to a variable and so it is no longer an IIFE.

Answer 2

The reason is purely syntactical. The JavaScript parser has to be able to easily differentiate between function declarations and function expressions. If we leave out the parentheses around the function expression, and put our immediate call as a separate statement function(){}(3) , the JavaScript parser will start processing it, and will conclude, because it's a separate statement starting with the key- word function, that it's dealing with a function declaration.

Because every function declaration has to have a name (and here we didn't specify one), an error will be thrown. To avoid this, we place the function expression within parentheses, signaling to the JavaScript parser that it's dealing with an expression, and not a statement. There's also an alternative way of achieving the same goal:

  (function(){}(3))

By wrapping the immediate function definition and call within parentheses, you can also notify the JavaScript parser that it's dealing with an expression.

Those four expressions are variations of the same theme of immediately invoked function expressions often found in various JavaScript libraries:

+function(){}();
-function(){}();
!function(){}();
~function(){}();

This time, instead of using parentheses around the function expressions to differentiate them from function declarations, we can use unary operators: +, -, , . and ~. We do this to signal to the JavaScript engine that it's dealing with expressions and not statements.