How to create IIFE functions in JavaScript?

Introduction to IIFE

I’m sure most people aren’t aware of the IIFE concept in JavaScript. It stands for Immediately-Invoked Function Expressions (IIFE). They were popular during the ES5 era for their infamous solution to the hoisting problems in JavaScript.

IIFE represents functions that execute the statements within them immediately without a function call. They do not have a function name for JavaScript to invoke it. It runs the code statements once the JavaScript engine discovers the function definition.

They are like the criminals that start shooting randomly without any prior warning in the air once they get caught.

It acts like any other statement inside JavaScript that executes once the engine scans it but inside a function. One can even declare them as asynchronous functions for those backend operations whenever required.

I launched a new free eBook!

The eBook is a 4-step framework to build projects and learn skills that enable you to attain practical experience in your field and become a developer whom recruiters and clients cannot say "No" during the discovery call.

https://afankhan.gumroad.com/l/build-to-solve-problems

Why use IIFE?

You can use the IIFE pattern whenever you wish to execute non-repetitive code lines that are not required in your program later and avoid populating the global namespace with unnecessary global variables.

Since variables cannot escape the block scope of a function except variables declared using the var keyword, the temporary IIFE function allows them to stay trapped as local variables. It is precisely helpful in Functional Programming.

"use strict";

// Function Declaration

(function () {
  const password = `uVkJa@^FmAHG7QW$(B+j`;
  console.log(`User's social media password: ${password}`);
})();

// Arrow Function

(() => {
  console.log(`This is the functional expression version of an IIFE`);
})();

// Asynchronous Arrow Function

(async () => {
  await fetch("https://api.quotable.io/quotes/random")
    .then((res) => res.json())
    .then((data) => {
      console.log(`Random Quote (Only Once): ${data[0].content}`);
    });
})();

We must precisely wrap a function declaration or arrow function with or without the async keyword to define an IIFE function. Once the engine reaches the function definition, it will execute the statements inside the function and discard the local variables after their usage.

It disappears after the first execution. You must also add () after closing an IIFE for JavaScript to understand this anonymous function. The function is still an expression and will not execute instantly without inserting the parentheses.

It’s not a feature but a pattern developed by engineers using JavaScript. IIFE isn’t used often in JavaScript anymore because the ES6-based const and let keywords create custom block scopes inside a code block.

Before ES6 and so far, many people utilized var, and IIFE makes sense for them. Variables with var are accessible outside standard code blocks because of a concept called Hoisting, and developers created this pattern to prevent the data from merging with the remaining variables in the global environment.

If you wish to invoke a function once besides its global namespace benefits, the IIFE design pattern is your best bet.

That's it. If you want to contribute, comment with your opinion and if I should change anything. I am also available via E-mail at hello@afankhan.com. Otherwise, Twitter (X) is the easiest way to reach out - @justmrkhan.

I'd love to get your feedback through the comments section.