In this section, we will learn what the Immediately Invoked Function Expression (AKA IIFE) function is and how to use it in JavaScript.

What Is IIFE JavaScript? (JavaScript Immediately Invoked Function Expression)

The Immediately Invoked Function Expression (AKA IIFE) function is a type of function that will be immediately executed right where the function is defined when the JavaScript execution engine reaches to that function.

Note: IFFE is pronounced as `(iffy)`.

Basically, when we create a typical function, as long as we don’t invoke the function explicitly, the function won’t invoke itself. The IFFE functions are on the opposite side.

function caller(name){
  console.log(name);
}

Output:

Here, because we didn’t call the `caller` function, it won’t invoke itself automatically no-matter how many times we run the program.

On the contrary, IFFE functions are designed in a way that they will be invoked immediately where they are defined.

How to Declare IIFE in JavaScript? IIFE JavaScript Syntax

This is the structure of an IFFE function:

(function function_name(parameters){

//body..;

})(arguments);

Note: in IFFE functions, the name of the function is optional. So we could create an IFFE function like this as well:

(function (parameters){

//body..;

})(arguments);

If you look closely at this function, you’ll see we have a two pairs of parentheses like this:

( )()

In the first pair of parentheses, we define the function. Basically, we declare a typical function in the first pair of parentheses.

Note: we can’t create a function expression in the first pair of parentheses though.

For example, this way of declaring an IFFE function is wrong and we will get a compile time error:

(var x = function function_name(parameters){

//body..;

})();

In the second pair of parentheses, we define the arguments that the function needs to take for its parameters.

Example:

(function greet(name){
        console.log(name);
      })("John");

In this example, the function we want invoke immediately is defined in the first pair of parentheses and it has one parameter. So in the second pair of parentheses, we need to set one argument and that will be assigned to the `name` parameter of the function.

Note: just like typical non-IFFE functions, we’re not required to assign arguments to an IFFE function as well. In a situation like that, the parameters of the target IFFE function will have their own default values.

Example: creating IIFE in JavaScript

(function greet(name){
  console.log("Welcome "+ name);
})("John");

Output:

Welcome John

In this program, the execution engine defined and at the same time invoked the IFFE function immediately when it reached to the line where this function is. That’s how we got the message: `Welcome John` on the browser’s console.

Outside of the pair of parentheses where an IFFE function is defined, we can’t access and call that function. If we try to do so, we will get a compile time error.

Example: IIFE in JavaScript

(function greet(name){
  console.log("Welcome "+ name);
})("John");

greet();

Output:

Welcome John

Uncaught ReferenceError: greet is not defined

In the program above, first, when the execution engine reached to the IFFE function, it invoked the function and executed its body. That’s why we got the message `Welcome John` on the console.

After that, the execution engine reaches to the next statement which is the `greet();` statement and tried to execute it.

Here, the execution engine checks the program to see if there’s a `greet` function already defined or not! Because there’s no such function in the program, the engine returns a reference error instead.

That’s why we got this error on the console:

Uncaught ReferenceError: greet is not defined

JavaScript IFFE Function and return Statement:

An IFFE function can also return a value just like other types of functions via the `return` keyword. So this means we can assign the result of calling an IFFE function to a variable or the parameter of a function.

Example: returning a value from an IFFE function

let message = (function greet(name){
  return `Welcome ${name}`;
})("John");
console.log(message);

Output:

Welcome John