Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Syntax
3.
Why do we use IIFE?
4.
How it is different from normal Function?
5.
Conversion of Functions into IIFEs
6.
FAQs
6.1.
What does IIFE stand for in JavaScript?
6.2.
Is IIFE Singleton?
6.3.
Can an IIFE return a value?
6.4.
Are IIFEs hoisted?
6.5.
Where do we use IIFE in JavaScript?
7.
Conclusion
Last Updated: Mar 27, 2024
Easy

IIFE in JS

Author Alok Pandey
0 upvote

Introduction

IIFE (Immediately Invoked Function Expression) is a specific function that is called without being explicitly invoked.

It will operate on its own even if you don't use it in your code. It can be compared to a callback function automatically called when a specific event occurs.

When we use 'Function Declaration' or 'Function Expression' to build a function, we usually need to call it in order to use it. However, in IIFE, The function is enclosed in parenthesis, indicating that it is a function expression. It is followed by (), which instructs the JavasScript compiler to execute or call the function right away.

 

Also Read About, Javascript hasOwnProperty

Syntax

(function (){ 
// Function Logic Here. 
})();
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Why do we use IIFE?

A good technique to secure the scope is to use an IIFE. You can utilize IIFEs to avoid difficulties with global variables and alias variables, safeguard private data, and avoid conflicts caused by multiple libraries exporting the same object name.

While some IIFE usages can be replaced with ES6 capabilities, you should still learn about IIFE to fully understand how scope works in JavaScript. Plus, you won't be able to convert legacy projects to ES6 right once. As a result, IIFEs continue to play an important role.

How it is different from normal Function?

We can divide IIFE into two parts Immediately Invoked & Function Expressions so. Immediately Invoked describes that its is does not need to be invoked; it gets executed at the time of deceleration. When we look at the syntax, we can see that there are two pairs of closed parentheses: the first parenthesis contains the logic to be executed, and the second is generally what we include when we call a function; the second parenthesis tells the compiler that the function expression must be executed immediately.

Now the second part, Function Expressions which, is a normal function used as an expression, is wrapped into parentheses.  

Eg- (function() { return "Coding Ninjas"; });

Here are some points which make it different from regular expressions.

  • The scope of immediately invoked function expressions (IIFEs) is defined. Outside of the function, the variables stated in the function expression are not accessible.
  • IIFEs, like other functions, can be anonymous or named.
  • IIFEs can be parameterized as well. As an example,
(function (x, y, z) {  
   console.log(a);  
   console.log(b);  
   console.log(c);  
 })(10, 20, 30);  

Output

10
20
30

Conversion of Functions into IIFEs

As we discussed above that IIFEs contain two parentheses and in the first parenthesis, we have to warp our main function and in the second we have to write any parameter passing to that function.

Let's see this conversion through an example.

// Regular Function.   
function test()   
{   
    console.log("Coding Ninjas");   
};   
// Regular Function execution.   
test();   
    
// IIFE creation and execution.   
(function() { console.log("coding Ninjas"); })();  

Output

coding Ninjas //through regular expression

coding Ninjas //through IIFE function

Try it on an online JS compiler.

FAQs

What does IIFE stand for in JavaScript?

A JavaScript function called an IIFE (Immediately Invoked Function Expression) starts as soon as it is defined.

Is IIFE Singleton?

An IIFE is used to implement the Singleton object. Wrapping the function in brackets, followed by two more brackets, causes it to run instantly.

Can an IIFE return a value?

IIFEs can not only return values, but they can also take arguments while being invoked.

Are IIFEs hoisted?

IIFEs are not hoisted, Because they are not the statements.

Where do we use IIFE in JavaScript?

We use IIFE  to secure the scope of a variable. You can utilize IIFEs to avoid difficulties with global variables, and alias variables, safeguard private data and avoid conflicts caused by multiple libraries exporting the same object name.

 

Conclusion

In this article, we have extensively discussed IIFE Immediately Invoked Function Expression)  in Javascript.

We hope that this blog has helped you enhance your knowledge regarding  IIFE Immediately Invoked Function Expression)  in Javascript and if you would like to learn more, check out our articles on Basic of javascript and Functions in JavaScript

Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. 

Enroll in our courses and refer to the mock test and problems available.

Take a look at the interview experiences and interview bundle for placement preparations.

Do upvote our blog to help other ninjas grow. 

Happy Coding!

Do upvote our blog to help other ninjas grow. Happy Coding!”

 

Previous article
Generator Function in JavaScript
Next article
Anonymous Functions in JavaScript
Live masterclass