IIFE | javascript

Summary of an IIFE

An IIFE stands for an immediately invoked function expression. In short, an iife is a function that gets turned into a function expression and gets immediately executed at runtime, once and only once by the javascript engine.

Break down of what an IIFE actually is

An iife can be broken down and understood with two main concepts.

Immediately invoked - means the function gets called right after it is created.

Function expression - means that you don't need to name that function. It is an anonymous function that is not hoisted. A function expression is a anonymous function that is attached to a variable. In the case of an iife, we don't need to attach it to a variable which is why it must be called immediately.

Syntax and Basic Example

There are many ways to write an iife. Below shows a few ways to this. In each case the syntax essentially turns the function into an expression which then immediately gets executed.

   
              // Variation 1: 
            (function(){
                const myName = 'Bob';
                console.log(myName);
            })();

            // Variation 2: 
            !function(){
                const myName = 'Anna';
                console.log(myName);
            }();

            // Variation 3: 
            void function (){
                const myName = 'Cambria';
                console.log(myName);
            }();

            // ** Reasons to use an iife **
            // Variables inside of it don't interfere with other global variables in our code.
            // It is a function that is immediatley executed 
            // It runs once an only once, unlike a regular function which can be called any number of times.
               

IIFE with Parameters

An iife can take parameters. This is a really handy pattern that let's you use an iife with arguments.

  
              (function myIIFE(greeting){
                const nameArr = ['Anna','Bob','Cambria'];
                nameArr.forEach(name => {
                        console.log(`${greeting} i'm ${name}!`);
                });
              })('Hello');
               

Variables inside an iife are not accesible to the outside world. They are private variables only accessible to the iife and destroyed once the iife has executed.

Count Down Function with an IIFE

Here is a slightly less trivial example.

  
        // count down function with iife
        (function myIIFE(greeting,startNumber,endNumber, timer = 1000){
             const mySetInterval = setInterval(()=>{

                    if(startNumber === endNumber){
                        console.log(`${greeting}`);
                        window.clearInterval(mySetInterval);
                    }
                    else{
                        console.log(`time until launch:${startNumber}`);
                    }

            startNumber--;
            },timer);

        })('blast off',3,0,500);
               

This iife has three required parameters and one optional parameter, timer, with a default value of 1000.

SetInterval and clearInterval is used to call the function a fixed number of times after a set delay

Once the startNumber is equal to the endNumber, we use clearInterval to stop the execution after the greeting is logged