Tutorialsteacher

Follow Us

Articles
  • C#
  • C# OOP
  • ASP.NET Core
  • ASP.NET MVC
  • LINQ
  • Inversion of Control (IoC)
  • Web API
  • JavaScript
  • TypeScript
  • jQuery
  • Angular 11
  • Node.js
  • D3.js
  • Sass
  • Python
  • Go lang
  • HTTPS (SSL)
  • Regex
  • SQL
  • SQL Server
  • PostgreSQL
  • MongoDB
  • JavaScript - Get Started
  • What is JavaScript
  • Setup JavaScript Dev Environment
  • HTML <script> Tag
  • JavaScript - Syntax
  • JavaScript - Popup Message
  • JavaScript - Variables
  • JavaScript - Operators
  • JavaScript - Data Types
  • JavaScript - String
  • JavaScript - Numbers
  • JavaScript - Boolean
  • JavaScript - Object
  • JavaScript - Date
  • JavaScript - Date Methods
  • JavaScript - Array
  • JavaScript - Array Methods
  • JavaScript - null and undefined
  • JavaScript - Function
  • JavaScript - if condition
  • JavaScript - switch
  • JavaScript - for loop
  • JavaScript - while loop
  • JavaScript - Scope
  • JavaScript - eval
  • JavaScript - Error Handling
  • JavaScript - strict mode
  • JavaScript - Hoisting
  • Define JS Class
  • JS Object In Depth
  • this Keyword
  • new Keyword
  • Prototype
  • Inheritance
  • Closure
  • IIFE
Entity Framework Extensions - Boost EF Core 9
  Bulk Insert
  Bulk Delete
  Bulk Update
  Bulk Merge

Immediately Invoked Function Expression - IIFE

Immediately Invoked Function Expression (IIFE) is one of the most popular design patterns in JavaScript. It pronounces like iify. IIFE has been used since long by JavaScript community but it had misleading term "self-executing anonymous function". Ben Alman gave it appropriate name "Immediately Invoked Function Expression"

As you know that a function in JavaScript creates the local scope. So, you can define variables and function inside a function which cannot be access outside of that function. However, sometime you accidently pollute the global variables or functions by unknowingly giving same name to variables & functions as global variable & function names. For example, there are multiple .js files in your application written by multiple developers over a period of time. Single JavaScript file includes many functions and so these multiple .js files will result in large number of functions. There is a good chance of having same name of function exists in different .js files written by multiple developer and if these files included in a single web page then it will pollute the global scope by having two or more function or variables with the same name. Consider following example of two different JavaScript file included in single page.

Consider the following example of MyScript1.js and MyScript2.js with same variable & function name.

Example: MyScript1.js
var userName = "Bill";

function display(name)
{
    alert("MyScript1.js: " + name);
}

display(userName);
Example: MyScript2.js
var userName = "Steve";

function display(name)
{
    alert("MyScript2.js: " + name);
}

display(userName);

Now, if you include these JS files in your web page then guess what will happen?

Example: Script tag in <head>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
<title>JavaScript Demo</title>
<meta property="og:title" content="JavaScript Demo" />
<script src="/MyScript1.js"></script> 
    <script src="/MyScript2.js"></script> 
</head>
<body>
    <h1> IIFE Demo</h1>
</body>
</html>

If you run above example, you will find that every time it call display() function in MyScript2.js because MyScript2.js included after MyScript1.js in a web page. So JavaScript considers last definition of a function if two functions have the same name.

IEFE solves this problem by having its own scope and restricting functions and variables to become global. The functions and variables declare inside IIFE will not pollute global scope even they have same name as global variables & functions. So let's see what is an IIFE is.

What is an IIFE?

As name suggest, IIFE is a function expression that automatically invokes after completion of the definition. The parenthesis () plays important role in IIFE pattern. In JavaScript, parenthesis cannot contain statements; it can only contain an expression.

Example: Parenthesis ()
(var foo = 10 > 9); // syntax error
(var foo = "foo", bar = "bar"); // syntax error
(10 &gt; 9); // valid
(alert("Hi")); // valid

First of all, define a function expression.

Example: IIFE
var myIIFE = function () {
        //write your js code here
    };

Now, wrap it with parenthesis. However, parenthesis does not allow declaration. So just remove declaration part and just write anonymous function as below.

Example: IIFE
(function () {
        //write your js code here
    });

Now, use () operator to call this anonymous function immediately after completion of its definition.

Example: IIFE
(function () {
    //write your js code here
})();

So, the above is called IIFE. You can write all the functions and variables inside IIFE without worrying about polluting the global scope or conflict with other's JavaScript code which have functions or variables with same name.

To solve the our above problem, wrap all the code in MyScript1.js & MyScript2.js file in IIFE as shown below.

Example: IIFE
(function () {
    var userName = "Steve";
    
    function display(name)
    {
        alert("MyScript2.js: " + name);
    }

    display(userName);
})();

So, even if MyScript1.js & MyScript2.js file includes functions and variables with the same name, they won't conflict with each other and pollute the global scope.

Also, you can pass arguments in IIFE as shown below.

Example: IIFE
var userName = "Bill";

(function (name) {

    function display(name)
    {
        alert("MyScript2.js: " + name);
    }

    display(name);
})(userName);

Advantages of IIFE:

  1. Do not create unnecessary global variables and functions
  2. Functions and variables defined in IIFE do not conflict with other functions & variables even if they have same name.
  3. Organize JavaScript code.
  4. Make JavaScript code maintainable.

Learn more on Immediately invoked function expression.

TUTORIALSTEACHER.COM

TutorialsTeacher.com is your authoritative source for comprehensive technologies tutorials, tailored to guide you through mastering various web and other technologies through a step-by-step approach.

Our content helps you to learn technologies easily and quickly for learners of all levels. By accessing this platform, you acknowledge that you have reviewed and consented to abide by our Terms of Use and Privacy Policy, designed to safeguard your experience and privacy rights.

[email protected]

ABOUT USTERMS OF USEPRIVACY POLICY
copywrite-symbol

2024 TutorialsTeacher.com. (v 1.2) All Rights Reserved.