IIFE in JavaScript

What is IIFE in JavaScript? | JavaScript IIFE with example

 

An IIFE means Immediately Invoked Function Expression. IIFE is a JavaSctript function that runs as soon as it is defined.
I know it is difficult to understand but i describe in simplicity so lets start.
So this is normal function in JavaScript that we used in our daily life.

// Normal function in JavaScript

function addTwoValues() {
var a = 10;
var b = 10;
  var answer = x + y; 
 
  console.log(answer);
}

addTogether();

So here is function addTwoValues() which is add two values and print the output.
I called that function after in last where function ends.
So, there might be question in your mind yes we use like this what is problem in that.

In above example our variables are immutable which means we can not change from outside of function. So our variables are not accessed, but what about function that can be accessed from anywhere.

So we have solution for that it calls IIFE.

It is a design pattern which is also known as a Self-Executing Anonymous Function and contains two major parts:

1. The first is the anonymous function with lexical scope enclosed within the Grouping Operator (). This prevents accessing variables within the IIFE idiom as well as polluting the global scope.
2. The second part creates the immediately invoked function expression () through which the JavaScript engine will directly interpret the function.

So the first thing we do is wrap our addTwoValues function in breakets.

// Function Expression in JavaScript

(function addTwoValues() {
var a = 10;
var b = 10;
   var answer = x + y; 
  
  console.log(answer);
 });

 addTogether();

Then delete function name. So now how we can call this function in your head.
Well its simple we add brackets at the end of the function (before the semicolon).

// Immediately Invoked Function Expression in JavaScript

(function () {
var a = 10;
var b = 10;
  var answer = x + y;
 
  console.log(answer);

})();

The function becomes a function expression which is immediately executed. The variable within the expression can not be accessed from outside it.

lets see another example of IIFE.

so you understand very easily from example.

(function() {

    // Declared variable name and assign value

    var name = "UniqueThrowdown";

})();

console.log(name);

// Throws "Uncaught ReferenceError: name is not defined"

At above example if we try to access name variable then we got error.

So how we can access that variable? Lets see.

var result = (function() {

    // Declared variable name and assign value

    var name = "UniqueThrowdown";

    return name;

})();

console.log(result);

// UniqueThrowdown

I am adding MDN website link where you can learn more about IIFE.

    Learn More About IIFE