What is an IIFE?

IIFE stands for "Immediately Invoked Function Expression". In this article, I will give a practical example of how I use IIFEs in my daily work. If you'd like to see other use cases for them or see different ways of formatting them, see the MDN docs here: https://developer.mozilla.org/en-US/docs/Glossary/IIFE.

What is an IIFE good for?

I use IIFEs all the time. I'm a web developer primarily working on a content team, which means I'm working in the CMS most of the time. If I have to develop some custom work that isn't predefined as widgets or components, I'm placing JavaScript directly on top of our site builder content.

Because a lot of my work revolves around DOM selection/manipulation, I need to make sure that the scripts I'm writing don't affect other scripts loaded by the CMS. That's where IIFEs come in.

I'm covering one major use for these, which is avoiding pollution of the global namespace. Unless I contain all of my declared variables within functions, their scope could creep outside of my script and cause any number of hard-to-troubleshoot bugs.

IIFE in action.

Most recently, I created a function that targeted the "href" attribute of a link. To keep my code clean, I try to keep my declared functions to one piece of work if possible.

Let's start by creating a select element with a corresponding link:

<select id="select">
    <option disabled selected>Select an Option</option>
    <option>Google</option>
    <option>Apple</option>
</select>
<a target="_parent" href="#" id="go-link">Go!</a>

You should end up with a select looking like the example below. It's not pretty but for this example, it does the job.

The goal is to change the href of the "Go!" button to reflect the homepage of the option selected. In this case, it's either Google's or Apple's homepage.

Now we need to write the script. Take a look at my highly commented example below and copy it for yourself. A complete link to my example CodePen will follow:

// wrap expressions in IIFE statement
(() => {
    // declare script variables that are IIFE protected
    let modifiedHref = "";
    let selectElement = document.getElementById("select");
    // IIFE completion will discard these variables until invoked again

    // set the modifiedHref variable value depending on the selection chosen.
    function setModifiedHref() {
        switch (
            event.target.value // "event target value is 'this.target.value' from event listener on "selectElement".
        ) {
            // cases reflect the selected options from select element.
            case "Google":
                modifiedHref = "https://www.google.com";
                break;
            case "Apple":
                modifiedHref = "https://www.apple.com";
                break;
            // set default case. I haven't had it fire yet. I'm using it for error catching. That's probably wrong.
            default:
                console.log("Something went wrong.");
        }
    }

    // set the href of the "Go!" link to current value of modifiedHref when called.
    function setGoLinkHref() {
        document.getElementById("go-link").setAttribute("href", modifiedHref);
    }

    selectElement.addEventListener("change", (event) => {
        setModifiedHref();
        setGoLinkHref();
    });
})();

// try to access the variable after the IIFE finishes.
console.log(modifiedHref);
// this will return "undefined" on purpose. Try it yourself!
// the "global" variables to this script will not polute global variables in other scripts on the page.

Feel free to remove the comments to get a better look at the code. I always try to appropriately name things so that they're easy to read.

The gist of my example is if you try to access the variables defined by my script outside of the IIFE, it returns undefined. That's directly intentional. If I were to name a variable exactly the same as another variable used in another script tag, I run the risk of injecting false values into someone else's expression or causing other unforeseen conflicts.

See my working example in my CodePen linked here: https://codepen.io/Technickel/pen/vYzRgNe

The more you know.

My goal in writing these articles is to bring practical experience directly to the reader. If I've completed a task that wasn't covered in boot camp content or tutorials and it's simple enough to share out, I want to provide that to you. There isn't enough intermediate developer content out there, and I feel like topics like the IIFE are great conversation points to bring up in interviews.

If you enjoyed the article, learned something new, or have anything to say I'd love to hear from you. Please react and/or drop me a comment below!