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

Asked 2 months ago, Updated 2 months ago, 3 views

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

JavaScript: The Definitive Guide, 7th Edition listed the former code as an example of IIFE (simplified).

However, JavaScript IIFE Use Case-Qiita or Think about IIFE in Javascript -torikatsu.dev and others describe the latter.

Are there any differences between these descriptions?

javascript

2022-09-30 12:10

2 Answers

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

).


2022-09-30 12:10

There is no difference.However, if you use the Arrow function, you can only use the latter statement.

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

Reason

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.

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 ~).


2022-09-30 12:10

If you have any answers or tips


© 2022 OneMinuteCode. All rights reserved.