Post
Ask Question

Advanced JavaScript: Immediately Invoke Function in JavaScript

Introduction

 
This is the "Advanced JavaScript" article series. In this series, we are learning and explaining various concepts of JavaScript. Here are links to all the articles.
In this article, we will learn about the immediate invocation of a function in JavaScript. In general, functions execute when we call them but sometimes it is necessary to execute some code at the time of page loading. For that purpose, there are a few other solutions like we can write code within document.ready in the jQuery method or we can call a function in the body's onLoad event.
 
The invocation of a function is another solution.  The function will be called when the body is loaded. Let's try to understand it with an example.
 
Define immediately invoke a function
 
This is the example of an immediately invoked function. We have defined it within a script tag.
  1. <!DOCTYPE html>    
  2. <html xmlns="http://www.w3.org/1999/xhtml">    
  3. <head>    
  4.     <title></title>    
  5. </head>    
  6. <body>    
  7.     <script>    
  8.         //Immediately invoke function    
  9.         (function () {    
  10.             console.log("This is Immediately invoked function");    
  11.         })();    
  12.     </script>    
  13. </body>    
  14. </html> 
    Here we have defined an immediately invoked function as an anonymous function. The following is sample output. We see that the function is executed when the page is loaded.
     
    invoke function
     
    More than one immediately invoked function
     
    We can define more than one immediately invoked function on the same page and they will all be executed, serially. Have a look at the following code.
    1. <!DOCTYPE html>    
    2. <html xmlns="http://www.w3.org/1999/xhtml">    
    3. <head>    
    4.     <title></title>    
    5. </head>    
    6. <body>    
    7.     <script>    
    8.         //More than one Immediately invoke function    
    9.         (function () {    
    10.             console.log("This is first function");    
    11.         })();     
    12.         (function () {    
    13.             console.log("This is second function");    
    14.         })();     
    15.     </script>    
    16. </body>    
    17. </html> 
      Here we see that both functions have executed.
       
      More than one immediately invoke function
       
      Make named function
       
      In our previous two articles, we saw how to declare an immediately invoked function, but they are anonymous in nature. We can define a named function. Here is one example:
      1. <!DOCTYPE html>    
      2. <html xmlns="http://www.w3.org/1999/xhtml">    
      3. <head>    
      4.     <title></title>    
      5. </head>    
      6. <body>    
      7.     <script>    
      8.         //Named function    
      9.         (fun= function () {    
      10.             console.log("This is named function");    
      11.         })();    
      12.     </script>    
      13. </body>    
      14. </html> 
      Make named function
       
      Pass a value to an immediately invoked function
       
      As a normal function, we can pass a value to an immediately invoked function. In this example, the function is taking one argument and within the function body, we are checking whether the argument has been supplied. If supplied then we are printing the value.
      1. <!DOCTYPE html>    
      2. <html xmlns="http://www.w3.org/1999/xhtml">    
      3. <head>    
      4.     <title></title>    
      5. </head>    
      6. <body>    
      7.     <script>    
      8.         //Named function with argument    
      9.         (fun = function (name) {    
      10.             if(name !== undefined)    
      11.                 console.log("Name is:- " + name);    
      12.         })();     
      13.         fun('Sourav Kayal');    
      14.     </script>    
      15. </body>    
      16. </html> 
       
      Pass value to immediate invoke function
       
      Scope of variable in immediately invoke function
       
      In general rule, the variable defined within JavaScript functions has function scope. In this example, we have defined two functions and the "name" variable is defined in the first function. We are then trying to access it from the second function. We see that it's not accessible from the second function.
      1. <!DOCTYPE html>    
      2. <html xmlns="http://www.w3.org/1999/xhtml">    
      3. <head>    
      4. </head>    
      5. <body>    
      6.     <script>    
      7.         (function () {    
      8.             var name = "Sourav Kayal";    
      9.             console.log("Name is function1:" + name);    
      10.         })();     
      11.     
      12.         (function () {    
      13.             console.log("Name is function2:" + name);    
      14.         })();    
      15.     </script>    
      16. </body>    
      17. </html>   
      Here is the output.
       
      Scope of variable in immediately invoke function
       

      Conclusion

       
      In this article, we have learned how to create an immediately invoked function in JavaScript. I hope you understood the concept. In a future article we will understand a few more concepts of advanced JavaScript.


      Similar Articles