Bracket placement in IIFE

Question

For years I've always written IIFEs like this:

(function () {
    console.log("hi");
})();

but I recently came across one like this with the last two brackets inside the final one:

(function () {
    console.log("hi");
}());

I assumed it wouldn't work, but surprisingly it does. This, however, obviously doesn't:

function () {
    console.log("hi");
}();

Why is this? The two working versions seem to do the same thing, but is there a difference?

however `!function () { console.log("hi"); }();` (or + or - or ~) does — Jaromanda X, Jun 12 '18 at 11:54
for completeness ... `(()=> {})()` is the only syntax that works with arrow `=>` (I think) — Jaromanda X, Jun 12 '18 at 11:57
@JaromandaX Interesting, thank you! Now to spend the rest of the day trying to think of a reason to use `!function () { ... }();` :) — DrRelling, Jun 12 '18 at 13:18

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

You can find more from MDN.

It is a design pattern which is also known as Self-Executing Anonymous Function and contains two major parts. The first is the anonymous function with lexical scope enclosed within the Grouping Operator (). This prevents accessing variables within the IIFE idiom as well as polluting the global scope.

The second part is creating the immediately executing function expression (), through which the JavaScript engine will directly interpret the function.

So the first part answered your question, that you need a Grouping Operator() to prevent accessing variables within the IIFE idiom as well as polluting the global scope

score 0 · Answer 2 · answered Jun 12 '18 at 11:55

0

Cause an IIFE only works with function expressions like:

(function() {})

Not with function statements.

answered Jun 12 '18 at 11:55

Jonas Wilms

132,000
20
149
151

Bracket placement in IIFE

2 Answers2