Explain why the following doesn't work as an IIFE: "function foo(){ }();". What needs to be changed to properly make it an IIFE?

This code returns a token error:

function foo(){ }(); // Error: Unexpected token ')'

Parens

If we place an expression inside the second parens (the grouping operator, which expects an expression to be evaluated), the error goes away.

function foo(){ }(1);

So, we know the token error is due to the second parens, which did not have any expression to evaluate.

But... it still doesn't work as an IIFE.

Breakdown

Let's change foo() to log a greeting. As you can see, nothing gets logged to the console.

function foo(){ console.log('Hello from foo!') }(1); // Nothing logged to the console

This is because foo() is never invoked.

In fact, we are wrong in expecting foo() to be invoked like this:

function foo(){ console.log('Hello from foo!') }();

Because, the second parens does not stand for invoking foo() here. And that is because the function declaration left to it, function foo(){ }, is not an expression. It's just a definition.

The parser sees the code above as:

function foo(){ console.log('Hello from foo!') };
();

Fix

In order to make the second parens (immediately) invoke foo(), we need to make the function declaration evaluate to a function expression first. And guess what, we do it with another parens.

(function foo(){ console.log('Hello from foo!') });

We can then go ahead and apply the invocation parens:

(function foo(){ console.log('Hello from foo!') }(); // "Hello from foo!"

Another fix would be to wrap the entire code in an overarching parens. This will also make it work as an IIFE:

(function foo(){ console.log('Hello from foo!') }()); // "Hello from foo!"

Here, everything, including the last parens is considered part of one expression and so foo() gets invoked.

---

References

1. Immediately-Invoked Function Expression (IIFE)
2. IIFE

Comments

[Tracy Gilmore]

Abdullah, Greetings. Many of your code examples above are missing the closing parenthesis on the console.log.

[Abdullah Al Numan]

Aha, yes!

[Sean Williams]

As I understand JavaScript, you basically shouldn't name this function. Normally function foo() { console.log("hello world"); } creates a declaration, that is, it binds the function to the name foo. However, I believe this immediate invocation business has the effect of not creating the binding, or at least, of immediately discarding the binding.

If I'm right about this, it doesn't have any real negative consequences, except that you might expect to be able to invoke foo later and might find the error confusing.

[peerreynders]

However, I believe this immediate invocation business has the effect of not creating the binding, or at least, of immediately discarding the binding.

A function declaration cannot be immediately invoked.

An IIFE is always a function expression (hence the name) so the function name is only bound and visible to the function object itself (and can be seen in the debugger IIRC).

[Sean Williams]

True, recursion is the reason to do it, though none of the examples here were recursive. You actually can do anonymous recursion, if you're willing to invoke the dark arts:

Y = f => (x => x(x))(x => f(y => x(x)(y)))

Y(f => n => n === 0 ? 1 : n * f(n - 1))(5)

Yeah this still introduces a name Y, but it's reusable so you actually do want that. You could get around that—after all, Church's original lambda calculus didn't have declarations—it's just an even worse idea than using the Y-combinator.

[J3ffJessie]

I have to give kudos immediately after reading and thank you for including the references to IIFE so that people can learn what that Acronym stands for. Very well put together article.

[peerreynders]

(function foo() {
  console.log('Hello from foo!');
})();

Way back in 2011 Douglas Crockford had some interesting things to say about the stylistic convention that Prettier (and the ESLint default) nowadays enforces on IIFEs.

Once you hear it, you'll never be able to unsee it—you've been warned.