IIFE JavaScript Example

An IIFE stands for immediately invoked function expression. I’ve also heard the term self invoked anonymous function (SIAF), but IIFE encompasses the pattern with a named function too.

Here’s the code for those that want a quick copy-and-go, but we’ll run through it underneath for those who want to understand the syntax 🍻.


  // anonymous function
  (function() {
    console.log(“IIFE”);
  })();
  
  // named function
  (function myIIFE(){
    console.log(“IIFE”);
  })();
  
  // with parameter
  const a = 1;
  (function(b){
    console.log(b) // 1
  })(a);
  
  // using an arrow function
  const a = 1;
  (b => {
    console.log(b) // 1;
  })(a);
  
  // using named arrow function
  const a = 1;
  (myIIFE = b => {
    console.log(b) // 1;
  })(a);
  
  // another way of writing them
  (function(){
    console.log(“IIFE”);
  }()); // Note the subtle difference on this line

If those statements there just look like a bunch of characters and you aren’t totally sure what’s going on, then let’s step into them so you’ll never need to Google IIFE again!

Write Your Own IIFE

They look a little confusing, especially with all those parentheses, but when you break them down you can see what each set of parentheses means.


  (1) // this is an expression that evaluates to 1
 
  // let’s replace 1 with a function
 
  (function(){})
  // this is an expression that evaluates to a function
  // it’s an anonymous function because it has no name

So all we’re doing so far is writing an expression that evaluates to a function, but it doesn't do anything. You could assign that expression to a variable, and then invoke it.


  let myFunc = (function(){});
  myFunc(); // the parantheses invoke the function assigned to myFunc

If we want to invoke the function immediately, we can skip the assignment to myFunc, and just invoke straight away using the usual ().


  // immediately invoked
  (function(){})();
  
  // the same, but formatted
  (function(){
  
  })();

There’s your IIFE! Think of it this way...


  let myFunc = (function(){});
  myFunc();
  
  // substitute myFunc on the line myFunc() for it’s value
  (function(){})()
  
  // or if you remember better with visuals, type two parantheses
  ()();
  
  // then put the function in the first set
  (function(){})();
  
  // then format
  (function(){
  
  })();

So what about passing in the parameter? Let’s use the more familiar function call.


  let myFunc = (function(b){ console.log(b); });
  myFunc(5); // 5

Then substitute the value of myFunc on the line myFunc(5)...


  // substitute the value of myFunc in myFunc(5)
  (function(b){ console.log(b); })(5)
  
  // the same, formatted
  (function(b){
    console.log(b); // 5
  })(5);
  
  // You may have seen jQuery plugins like this
  (function($){
    // access jQuery using $
  })(jQuery);

Why is it called an Immediately Invoked Function Expression?


  (1) // here’s an expression
 
  (function(){}) // here’s a function expression
  
  (function(){})() // here’s invoking the function expression immediately

What’s an IIFE used for?

If you understand JavaScript scope, you’ll know that variables declared within functions are private to that scope. That means that something outside an IIFE won’t have access to the variables or functions inside (unless explicitly exposed using an assignment or return). This encapsulates data and functionality within the IIFE.

It’s good coding practice to group related code into modules and only expose what’s necessary, hiding the details that other parts of the codebase don’t need to know about or interact with. This helps avoid unexpected values, errors and conflicts between different modules of code.

The jQuery example above means that $ within the IIFE is the jQuery object. If $ was already defined in the global scope, perhaps as another JavaScript library, then it couldn’t be used for jQuery. So jQuery is explicitly passed as an argument in the IIFE and assigned to $, where it can then be used within the IIFE without conflict.

Invoking the IIFE automatically means the function doesn’t need to be explicitly called in the parent scope, again reducing the need for unconnected parts to be sharing the same scope.

If you have any questions or comments or want to connect, you can follow me on Twitter, or sign up to the newsletter in the footer for front-end articles to your inbox 👇


Back home