Monday, 14 December, 2015 UTC
Summary
A WatchMeCode subscriber recently emailed a question regarding some code in my Variable Scope episode (part of the JS Fundamentals series).
In her question, she points out some code from the episode, wondering if it is still considered an Immediately Invoking Function Expression (IIFE) or not.
I watched the variable scope episode and you initially said immediately invoked functions aren’t defined by a variable or function name, but later in the video you returned foo and assigned a variable name to the immediately invoked function. Why is that? Is it because of the retuned value? If so is it still considered an immediately invoked function?Also I wanted to know why did you call defineFoo(); And return foo;Doesn’t defineFoo(); output the value of the foo variable?Here is the code I’m referencing…
There are a lot of things happening purely for demonstration purposes in this code. Because of this, it’s a bit confusing to look at, trying to see everything that’s happening all at once.
To really understand what’s happening and to answer the questions, then, it’s best to break this down into individual parts and put it all back together again.
IIFE Basics
As a bit of background, the term Immediately Invoking Function Expression (“IIFE”) was created – or at least popularized – by Ben Alman in 2010.
In general, an IIFE is any function that gets invoked as soon as it’s defined. For example:
This example will immediately log “foo”, because the wrapping parenthesis will cause it to be invoked right away.
There’s no reference to this function anywhere, other than where the function is defined. It’s not a named function, so it can’t be invoked by name. there’s no variable pointing to the function definition, either, so it can’t be invoked from a variable name. it gets defined and executed immediately.
(As a side note to all of this, this WatchMeCode Q&A episode might help explain some of the IIFE syntax)
Returning Values From An IIFE
You can also return a value from an IIFE, like any other function – you only need to assign a variable to the resulting value, from outside of the wrapping parenthesis.
To illustrate this, look at the following two examples.
The first example is a plain function that gets invoked by name. The second is an IIFE that gets invoked immediately. In both cases, the return value of “foo” is assigned to the variable “f”.
The second example is still an IIFE, because the wrapping parens cause it to be invoked immediately. This function happens to return a value, though, and the result of that invocation is assigned to a variable.
Functions Within IIFEs
To really put the “fun” in functions (lol – so punny), JavaScript allows functions to be defined inside of other functions. An IIFE can even return a function from within itself. The wrapping IIFE is still an IIFE, though, because it is immediately invoked:
In this case, the wrapping “(function(){ })();” is the IIFE.
The function that is returned from within it is not an IIFE – it is just an anonymous (un-named) function. This anonymous function happens to be assigned to the “something” variable.
Calling Functions Within The IIFE
In the original code example, the IIFE isn’t returning the nested function. Instead, it is immediately calling the nested function.
The value of the IIFE in this case, is to keep the inner function and code out of the global namespace of the JavaScript runtime. When you create a variable within the IIFE, it creates scope around that variable, preventing that variable from being accessed anywhere outside of the IIFE wrapper.
Both of these last two examples will still produce “foo” in the console output. The second one does it through a variable and a closure around that variable. This example also produces an error from the second console.log, as “fooValue” is undefined outside of the IIFE.
Putting It All Back Together
In the original example, the code is taken one step further and a value is returned from the IIFE wrapper.
This will log “foo” to the console twice; once from the inner call to “something();” and again from the “console.log(result);” after the IIFE is invoked and returns the value.
Wrapping It Up: The JavaScript Module Pattern
The addition of the if-statement in that original example is extraneous at this point. It adds no value, other than demonstrating the availability of the variable within the closure. However, the full example in the original code and the de/re-construction of this example begins to show the full extent of how flexible JavaScript can be.
You are not limited to returning simple values or single functions from an IIFE. Any code required can be executed within the IIFE, and any value – including complete objects – can be returned. This allows you to create scope around large chunks of code, and is the basis of the JavaScript module pattern (not to be confused with ES6 modules or CommonJS / NodeJS modules).