In JS's immediate function execution formula, how does changing the position of ( ) affect behavior?

What is the (function(){})() construction in JavaScript?- Stack Overflow linked Immediately-Invoked Function Expression(IIFE)I thought the article and Wikipedia commentary and reference link might be helpful.

I think it would be accurate to look at the link above, but I will write down my understanding below.

Some easy-to-understand examples of running a function immediately include:

vari=function(){return10;}();
console.log(i)

Now, if you skip substitution and try to write like this because you don't need a return value, you'll get a syntax error:

function() {return10;}();

This is because the function keyword is considered the function expression in the first example, but the following example is considered the function declaration.
There are several ways to make it considered a functional expression (as you can see at the beginning link), but typical is to enclose the entire right side of the first example in parentheses

//vari=(function(){return10;}());
// because no return value is required
(function() {return10;}();

In addition to , you can avoid problems by enclosing only the function expression in parentheses.

(function(){return10;})();

In other words, the answer to the question is no difference.

For more information on which type of writing would be preferable, see This article was written in 2010.

(function(){/*code*/}()); // Crockford recommendations this one
  (function() {/*code*/}); // But this one works just as well

It says (*1), but This article links to the ES6 era.

(abbreviated)

(function(){
    ···
}());

Or just around the function expression:

(function(){
    ···
})();

Given how arrow functions work, the later way of parentsizing should be preferred from now on.

and

*1) I imagine Douglas Crockford's book JavaScript: The Good Parts may have that description (Reference

// Probably the shortest immediate execution function at this time
(_=>{/* code*/})()

AST Explorer, and so on.Naturally, when you multiply the code generation tools that use these parsers, both statements are translated into the same code.

• Acorn+Astring
• Babel

Both statements in the above two code generation tools are

(function(){
  return;
})();

That's what happened."Also, although it is an old book, ""Open eyes! JavaScript"" says ""You can get the same result."""

Announcement: Why Use Grouping Operators (Round Braces)

In the article linked to the question,

The grouping operator appears to have a static scope.
...
Grouping operators may be used to separate namespaces.

and so on.If this is correct, there is a difference between the two statements if there is an expression to pass to the argument.

But this is a mistake.Because the function itself has a scope, it does not have to be enclosed by a grouping operator to achieve the same result.Grouping operators do not create scopes.I think the reason why grouping operators are used is because they are not spellbound and are a little easier to understand than by adding monomial operators (! or ~).