Function expressions and arrow functions are the only function definition styles that are, technically, expressions. As we have seen, this quality makes them useful when we need to pass them as values to other functions without having to go through the process of assignment.

As we mentioned previously, a function without an assignment, and thus without a reference to its value, is typically called an anonymous function and will look like this:

(function() {
  // I am an anonymous function
})

The idea of an anonymous function is extended further by the concept of an Immediately Invoked Function Expression (IIFE). An IIFE is just a regular anonymous function that is invoked immediately, like so:

(function() {
  // I am immediately invoked
}());

Note the invocation parentheses (that is, ...()) after the closing curly brace. This will call the function and thus makes the preceding syntactic construct an IIEE.

An IIFE is not a distinct concept within the language itself. It is just a useful term that the community has come up with to describe the common pattern of immediately invoking a function. It's a useful pattern because it allows us to create an ad hoc scope, meaning that any variables defined within it are constrained to that scope and will not leak outside, just as we'd expect from any function. This immediate scope is useful to quickly do self-contained work without affecting the parent scope.

The exact syntax of an IIFE can vary. For example, if we use an arrow function, then the calling parenthesis must be placed after the wrapped function expression:

(() => {
  // I am immediately invoked
})(); // <- () actually calls the function

The mechanism remains essentially the same, regardless of whether we use a function expression or an arrow function.

If the concept of an IIFE is confusing, it's simpler to understand what's going on if we replace the actual function with an identifier, fn, and imagine that we have previously assigned a function to this identifier. Here, we can call fn like so:

fn();

Now, we could choose to wrap the fn reference in parentheses. This would make no difference to the invocation, although it may look bizarre:

(fn)();

It's useful to remember that parentheses are just syntactic vessels that are sometimes needed to avoid syntactic ambiguity. So, all of these are technically equivalent:

fn();
(fn)();
((fn))();

If we replace the fn reference here with an inline anonymous function, nothing groundbreaking occurs. Instead of referencing an existing function, we are just expressing an inline function, on the spot, and then invoking it:

(function() {
  // Called immediately...
})();

IIFEs are useful because they provide scope isolation without the burden of having to define a function with a name and then later reference and invoke it, as we're doing here:

const initializeApp = () => {
  // Initializing...
};

initializeApp();

Within the browser, prior to complex builds involving compilation and bundling, IIFEs were useful because they provided scope isolation while not leaking any names into the global scope. Nowadays, however, the IIFE is rarely necessary.

Interestingly, the initializeApp function in the preceding code is, arguably, more readable and understandable with an explicit name. This is why, even if necessary, IIFEs are sometimes considered needlessly confusing and fancy. A named function usefully provides a clue as to its purpose and the intent of the author. Without a name, the reader of our code is left with the cognitive burden of having to read through the function itself to discover its broad purpose. For this reason, it is usually preferable to avoid IIFEs and similar anonymous constructs unless you have a very specific need.