IIFE in JavaScript

An Immediately-Invoked Function Expression (IIFE) is a JavaScript design pattern that involves defining a function and then immediately executing it. It's a way to create a self-contained scope for your code, preventing variable leaks into the global scope, and it's commonly used in scenarios where you want to encapsulate logic, avoid naming conflicts, or perform one-time setup tasks.

(function() { // Your code here })();
  1. Function Declaration: (function() { ... }) defines an anonymous function enclosed in parentheses. This is important because in JavaScript, an expression is expected after the ( symbol, and a function declaration is a statement. Wrapping it in parentheses makes it an expression.
  2. Invocation: The final pair of parentheses at the end () immediately invokes the function. This means the code within the function block is executed immediately after its creation.

Basic IIFE

(function() { console.log("I am an IIFE!"); })(); // Output: "I am an IIFE!"

Encapsulation

var outsideVariable = "I'm outside!"; (function() { var insideVariable = "I'm inside!"; console.log(outsideVariable); // Accessible from the outer scope })(); console.log(insideVariable); // Error: 'insideVariable' is not defined

In this example, the IIFE creates a new scope, encapsulating the insideVariable and preventing it from leaking into the outer scope.

Passing Parameters

(function(name) { console.log("Hello, " + name); })("Alice"); // Output: "Hello, Alice"

Returning Values

var result = (function(a, b) { return a + b; })(10, 5); console.log(result); // Output: 15

In this example, the IIFE calculates the sum of two numbers and immediately returns the result.

Module Pattern

var counter = (function() { var count = 0; return { increment: function() { count++; }, getCount: function() { return count; } }; })(); console.log(counter.getCount()); // Output: 0 counter.increment(); console.log(counter.getCount()); // Output: 1

This example demonstrates the module pattern using an IIFE to create a counter with private state.

Conclusion

IIFEs have become less common with the advent of modern JavaScript features like block-scoped variables (let and const) and ES6 modules. However, they still offer a concise way to create isolated scopes and execute code immediately.






Related Topics
  1. JavaScript Interview Questions (Part2)
  2. JavaScript Interview Questions (Part3)
  3. Is JavaScript a true OOP language?
  4. Advantages and Disadvantages of JavaScript
  1. Difference Between JavaScript and ECMAScript?
  2. What is noscript tag?
  3. Escaping Special Characters in JavaScript
  4. What is undefined x 1 in JavaScript?
  5. Logical operators in JavaScript
  6. Difference between '=', '==' and '===' operators in JS
  7. How to loop through objects in JavaScript?
  8. How to write html code dynamically using JavaScript?
  9. How to add html elements dynamically with JavaScript?
  10. How to load another html page from javascript?
  11. What Is The Disadvantages Using InnerHTML In JavaScript?
  12. What is Browser Object Model
  13. How to detect the OS on the client machine in JavaScript?
  14. Difference between window, document, and screen in Javascript?
  15. Difference between the substr() and substring() in JavaScript?
  16. How to replace all occurrences of a string in JavaScript?
  17. Test a string as a literal and as an object in JavaScript
  18. What is Associative Array in JavaScript
  19. What is an anonymous function in JavaScript?
  20. What is the use of 'bind' method in JavaScript?
  21. Pure functions Vs. Impure functions in javascript
  22. Is Javascript a Functional Programming Language?
  23. What's the Difference Between Class and Prototypal Inheritance?
  24. Javascript, Pass by Value or Pass by Reference?
  25. How to prevent modification of an object in Javascript?
  26. What is 'this' keyword in JavaScript?
  27. How Does Function Hoisting Work in JavaScript?
  28. What do mean by NULL in Javascript?
  29. What does the delete operator do in JavaScript?
  30. What is the Infinity property used for in Javascript?
  31. Event bubbling and Event Capturing in JavScript?
  32. What is "strict mode" and how is it used in JavaScript?
  33. What is the difference between call and apply in JavaScript
  34. Entire content of a JavaScript source file in a function block?
  35. What is escape & unescape String functions in JavaScript?
  36. Instanceof operator in JavaScript
  37. What Are RESTful (REpresentational State Transfer)Web Services?
  38. What is Unobtrusive JavaScript & Why it's Important?
  39. What Does JavaScript Void(0) Mean?
  40. What are JavaScript Cookies?
  41. Difference between Client side JavaScript and Server side JavaScript
  42. TypeError: document.getelementbyid(...) is null
  43. Uncaught TypeError: Cannot read property of undefined In JavaScript
  44. Null and Undefined in JavaScript