0

What is the difference between these js function structure

(function () { console.log("Foo!"); }());

(function () { console.log("Foo!"); })();

;(function () { console.log("Foo!"); }());

+function() { console.log("done!"); }();
Pankaj Bisht
  • 870
  • 8
  • 26

2 Answers2

1

From what I know for the first three there is no difference.

When you write Immediately-Invoked Function Expression the external arguments parentheses can exists in both inside and outside the wrapping parentheses. Think of it, just as another syntax for the same purpose.

So this:

(
    function() {
    }
());

and this:

(
    function() {
    }
)();

are totally equal.

For the third example, the semicolon, it is used as a safeguard, in the case of files concatenation. When you write code, it is possible, you or a vendor has a script that does not end with the semicolon. In this case when you concatenate, e previous file code, that don't end with the question mark will brake the script.

In example

script-1.js

var name = 'Nikos';
console.log( name )

script-2.js

(
    function() {
       // Do some stuff here
    }
)();

concatenation.js

var name = 'Nikos';
console.log( name ) // This line will throw an error, because it is not the last statement in the file.

(
   function() {
       // Do some stuff here
    }
)();

But if we change the script-2.js to this:

script-2.js

;(
    function() {
       // Do some stuff here
    }
)();

The concatenation.js will looks like this:

var name = 'Nikos';
console.log( name )

;(  // This will force the previous statement to finish.
   function() {
       // Do some stuff here
    }
)();

For the last I found this:

It forces the parser to treat the part following the + as an expression. This is usually used for functions that are invoked immediately, e.g.:

+function() { console.log("Foo!"); }();

Without the + there, if the parser is in a state where it's expecting a statement (which can be an expression or several non-expression statements), the word function looks like the beginning of a function declaration rather than a function expression and so the () following it (the ones at the end of the line above) would be a syntax error (as would the absense of a name, in that example). With the +, it makes it a function expression, which means the name is optional and which results in a reference to the function, which can be invoked, so the parentheses are valid.

  • is just one of the options. It can also be -, !, ~, or just about any other unary operator. Alternately, you can use parentheses (this is more common, but neither more nor less correct syntactically):
(function() { console.log("Foo!"); })();
// or
(function() { console.log("Foo!"); }());

from : https://stackoverflow.com/a/13341710/1150619

Community
  • 1
  • 1
KodeFor.Me
  • 11,719
  • 19
  • 82
  • 154
0

They're all pretty much the same.

The first two are precisely identical. They define the function, invoke it, and evaluate to the result (in case anyone is using the result for anything). Whether to say (function() { })() or (function() { })()) is a matter of some debate. Some linters have a strong preference and will complain if you don't do it "their" way. Semantically, they are identical. In either case, the initial parenthesis forces the parser to treat this as a function expression. In the first case, the function expression itself is invoked with (), and then the leading parenthesis closed; in the second case the parenthesized expression enclosing the function expression is invoked.

The latter two cases are used to prevent problems that could arise when concatenating JS files. An exclamation mark is also often used for this purpose. This is covered in other questions here on SO such as this or this or this or this.

Community
  • 1
  • 1