Teachnique
      CourseRoadmaps
      Login

      OverviewPlacementSyntaxHello WorldConsole.log()CommentsVariableslet StatementConstantsData TypesType ConversionsStrict ModeReserved Keywords

      OperatorsArithmetic OperatorsComparison OperatorsLogical OperatorsBitwise OperatorsAssignment OperatorsConditional Operatorstypeof OperatorNullish Coalescing OperatorDelete OperatorComma OperatorGrouping OperatorYield OperatorSpread OperatorExponentiation OperatorOperator Precedence

      If...ElseWhile LoopsFor LoopFor...in LoopFor...of LoopLoop ControlBreak StatementContinue StatementSwitch CaseUser Defined Iterators

      FunctionsFunction ExpressionsFunction ParametersDefault ParametersFunction() ConstructorFunction HoistingArrow FunctionsFunction InvocationFunction call() MethodFunction apply() MethodFunction bind() MethodClosuresVariable ScopeGlobal VariablesSmart Function Parameters

      NumberBooleanStringsArraysDateMathRegExpSymbolSetsWeakSetMapsWeakMapIterablesReflectTypedArrayTempate LiteralsTagged Templates

      Objects OverviewClassesObject PropertiesObject MethodsStatic MethodsDisplay ObjectsObject AccessorsObject ConstructorsNative PrototypesES5 Object MethodsEncapsulationInheritanceAbstractionPolymorphismDestructuring AssignmentObject DestructuringArray DestructuringNested DestructuringOptional ChainingGlobal ObjectMixinsProxies

      HistoryVersionsES5ES6ECMAScript 2016ECMAScript 2017ECMAScript 2018ECMAScript 2019ECMAScript 2020ECMAScript 2021ECMAScript 2022

      CookiesCookie AttributesDeleting Cookies

      Browser Object ModelWindow ObjectDocument ObjectScreen ObjectHistory ObjectNavigator ObjectLocation ObjectConsole Object

      Web APIHistory APIStorage APIForms APIWorker APIFetch APIGeolocation API

      EventsDOM Events

      Feedback

      Submit request if you have any questions.

      Course
      Function Hoisting

      JavaScript Tutorial

      This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.

      Self-Invoking Functions

      Self-Invoking Functions

      The self-invoking functions are JavaScript functions that execute immediately as they are defined. To define a self-invoking function, you can enclose an anonymous function within parentheses followed by another set of parentheses. These are also called self-executing anonymous functions.
      The anonymous function inside the first pair of parentheses is basically a function defined with function expression. So a self-invoking function is also called immediately invoked function expression (IIFE).

      Syntax

      The syntax to define the self-invoking functions in JavaScript is as follows
      (function () {
         // function body
      })();
      The function definition is enclosed inside the pair of parentheses. The second pair of parentheses at the end executes the function.
      An alternative syntax is as follows
      (function () {
         // function body
      }());
      The first syntax is more clear.

      Example

      In the example below, we print the message in the output using the self-executing function.
      <html>
      <body>
         <p id = "output"> </p>
         <script>
            (function () {
      	     document.getElementById("output").innerHTML = 
      	     "Self-invoked function is executed!";
            }());
         </script>
      </body>
      </html>

      Output

      Self-invoked function is executed!

      Self-Invoking Functions with Parameters

      You can create a self-invoking function with parameters and pass arguments to it. It is common practice to pass references to global objects such as window, etc.
      (function (paras) {
         // function body
      })(args);
      The paras are the list of parameters in the definition of the anonymous function and the args are arguments passed.

      Example

      In the below example, we created an anonymous function with a parameter name. We have passed an argument to it.
      <html>
      <body>
         <div id = "demo"></div>
         <script>
            const output = document.getElementById("demo");
            (function (name) {
               output.innerHTML = `Welcome to ${name}`;
            })("Tutorials Point !");
         </script>
      </body>
      </html>

      Output

      Welcome to Tutorials Point !

      Private Scope of Self-Invoking Functions

      Whatever code is defined inside the self-executing function remains in the private scope and doesn't pollute the global scope. So, developers can make code clear and remove the errors like naming conflicts, etc. Also, the code of the self-invoking function remains hidden and can't be accessible by other parts of the code.

      Example

      In the example below, we have defined the variable 'a' outside or inside the function. The variable defined outside is a global variable, and the variable defined inside the function is a private variable, limited to the self-executing function's scope.
      Also, we have printed the value of the variable from inside and outside of the function. Users can observe the variable's value in the output.
      In this way, we can avoid the naming conflicts.
      <html>
      <body>
         <div id = "output"> </div>
         <script>
            const output = document.getElementById("output");
            let a = 10;
               (function () {
                  output.innerHTML += "Entering to the function <br/>";
                  var a = 20;
                  output.innerHTML += "The value of a is " + a + "<br>";
                  output.innerHTML += "Exiting to the function <br/>";
               }());
               output.innerHTML += "The value of the outside the function is " + a;
          </script>
      </body>
      </html>

      Output

      Entering to the function
      The value of a is 20
      Exiting to the function
      The value of the outside the function is 10

      Example

      In some cases, it is required to access the variable of the self-executing function outside of the function. In this case, we can make that variable global using the 'window' object as shown below and access the variable in the global scope.
      <html>
      <body>
         <div id = "output"> </div>
         <script>
            (function () {
               var string = "JavaScript";
               window.string = string;
            })();
            document.getElementById("output").innerHTML =
      	  "The value of the string variable is: " + string;
         </script>
      </body>
      </html>

      Output

      The value of the string variable is: JavaScript
      Private scope of a self-invoking function can be accessed by using the call() or apply() methods.

      Benefits of Using the Self-Invoking Functions

      • Avoiding the global scope − Developers can avoid the global scope for variables and functions using the self-invoking function, helping to avoid naming conflict and making code more readable.
      • Initialization − The self-executing functions can be used for the initialization of variables.
      • Code privacy − Programmers can avoid accessing the code of the self-executing function by other parts of the code.