Want to Understand Immediately Invoked Function Expressions (IIFEs)? You Can Start Now

Javascript Has Three Types of Functions: Named, Annonymous, and IIFE. Do you know the difference?

Photo by Rod Long

Immediately Invoked Function Expressions, or IIFE, are exactly what the name suggests. They are functions that are immediately called as soon as you define them.

Take the following sample code:

This is a function declaration for the named function printSuccess. In this case, the function printSuccesswill not run unless you provide the function call printSuccess().

But what if we wanted printSuccessto run immediately? As soon as the compiler encounters the function declaration, we want the function to execute without a function call.

This is how we would achieve that. As you can see we wrap an anonymous, unnamed function in parentheses followed by ();

When the compiler encounters this sample code, it will execute immediately and print success to the console. But what if we actually wanted to use this function over and over again? Because right now, the above IIFE will only execute once.

This is how we would accomplish that. When the compiler encounters this line of code, it will still immediately invoke the function and print success to the console. However, this will also allow us to reuse the function by calling printSuccess();

Find What’s Wrong

Here’s a quick exercise:

Recently, I was building a Random Quote Generator, and I was using an API to generate these quotes.

The code above represents what the function originally looked like. As you can see, I provide a function definition and immediately followed that with a function call. This seemed like a good opportunity for an IIFE.

Initially, this was how I did that. But for some reason, it would not work. Can you spot the problem?

Note: We are keeping the very last line because we do want the generateQuote function to be reusable. When the user clicks a button, we want the user to be able to generate new quotes, meaning we will have to call this function over and over again.

Can you figure out the quick fix?

This isn’t the answer either. Errors would occur. Why?

This is the answer. In this example, generateQuote will be immediately invoked. And after the function declaration, we are free to reuse the generateQuote function whenever we want.

Sample Code

Here are some sample codes you can play with.

(generateQuote = function (){
    console.log("trip")
})();
/*
   prints:
   trip
*/
(  foo = function (){
    let x =2;
    let y =5;
    console.log(x+y)
})();
foo();
/*
   prints:
   7
   7
*/
(function (){
    let x =2;
    let y =5;
    console.log(x*y)
})();
/*
   prints:
   7
*/
(function (x = 0){
    let y =5;
    console.log(x*y)
})();
/*
   prints:
   0
*/
(sum = function (x = 4){
    let y =5;
    console.log(x*y)
})();
sum(10);
/*
   prints:
   20
   50
*/
let x = 4;
let y = 2;
(sum = function (){
    let x = 0;
    let y =5;
    console.log(x*y)
})();
sum();
/*
    prints:
    0
    0
*/

More content at plainenglish.io. Sign up for our free weekly newsletter. Get exclusive access to writing opportunities and advice in our community Discord.