Post
Ask Question

Advanced JavaScript: Function Definition Style in JavaScript

Introduction

 
Welcome to the "Advanced JavaScript" article series. Here we are explaining somewhat conceptual and advanced topics of JavaScript. In our previous two articles, we learned the history of JavaScript and also explained objects in JavaScript. You can read them here:
Let's understand the basics of function definitions. In JavaScript, we can define functions in two ways. The first approach is the traditional function definition, like other languages and the other one is JavaScript's own style. Let's understand them one by one. 
 

The traditional approach to defining a function

 
In this section we will see the traditional approach to define function. Nothing special in this, have a look at the following code.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>     
  2. <!DOCTYPE html>     
  3. <html xmlns="http://www.w3.org/1999/xhtml">    
  4. <head id="Head1" runat="server">    
  5.     <title></title>    
  6.     <script>    
  7.             function fun() {    
  8.             alert("Function Call");    
  9.         }    
  10.     </script>    
  11. </head>    
  12. <body>    
  13.     <form id="form1" runat="server">    
  14.     <input type="button" name="Click Me" value="Click Me" onclick="fun();" />    
  15.     </form>    
  16. </body>    
  17. </html> 
    Here is a sample example
     
    define function
     

    Define function on the fly

     
    This is JavaScript's way to define functions. In this way, at first we will define one variable (object in terms of JavaScript) and then we will attach an anonymous function to it. Have a look at the following code.
    1. <html xmlns="http://www.w3.org/1999/xhtml">    
    2. <head id="Head1" runat="server">    
    3.     <title></title>    
    4.     <script>    
    5.                //Anonymous function    
    6.         var fun = function () {    
    7.     alert("Anonymous function");    
    8. }    
    9.     </script>    
    10. </head>    
    11. <body>    
    12.     <form id="form1" runat="server">    
    13.     <input type="button" name="Click Me" value="Click Me" onclick="fun();" />    
    14.     </form>    
    15. </body>    
    16. </html> 
      Sample output
       
      define function on fly
       
      Ok, we saw two different approaches to define a function. Now, what are the differences between them? Let's explain here. 
       
      The first approach is a normal function definition and we can call it from anywhere. Have a look at the following code.
      1. <body>    
      2.     <form id="form1" runat="server">    
      3.     <script>    
      4.         //Normal function    
      5.         fun();    
      6.         function fun() {    
      7.             alert("Normal Function");    
      8.         }    
      9.     </script>    
      10.     </form>    
      11. </body> 
        Here is the output. We see that a function is being called.
         
        different approaches to define function
         
        Now we will apply the same policy for anonymous functions.
        1. <body>    
        2.     <form id="form1" runat="server">    
        3.     <script>    
        4.                fun();    
        5.         var fun = function () {    
        6.             alert("Anonymous function");    
        7.         }     
        8.     </script>    
        9.     </form>    
        10. </body> 
          Output
           
          anonymous function
           
          Ha... Ha... No output. So, the function is not being called. The reason is we are attaching an anonymous function at parse time (the second style) whereas the normal definition (the first style) of a function definition is done at runtime. 
           
          And as a side effect when we write a function like the following:
          1. fun()    
          2.     function fun(){    
          3.     alert("Normal function");    
          4.     }  
            The function is created and put into the window. The browser finds the function "fun", creates the function and stores it as "window.fun". For that reason fun can be called before its declaration. Because, when the function is called it is already declared.  Let's try to understand with an example.
            1. <body>    
            2.     <form id="form1" runat="server">       
            3.     <script>    
            4.             alert(fun);    
            5.         function fun() {    
            6.         }    
            7.     </script>     
            8.     </form>    
            9. </body> 
              This is a simple code that will clarify our confusion. Just before the function declaration, we are checking whether the function is defined. And here is the output.
               
              window object
               
              The output shows that the function is defined, Yes. Keep in mind that before declaration/definition we are calling. Ok , we need to prove one more concept. I previously said that it creates (function) in the window object. Let's prove it. Here is sample code to prove that:
              1. <body>    
              2.     <form id="form1" runat="server">    
              3.     <script>    
              4.          alert(window.fun);    
              5.         function fun() {    
              6.         }    
              7.     </script>    
              8.     </form>    
              9. </body> 
                In the code above we are trying to access fun from the window object. Because we said that the function is created and attached in the "window" object. Here is the output.
                 
                window object
                 
                It's showing the function body. In other words, the function was created in the window object. The basic idea is clear.
                 
                Now, let's try the same test in the second fashion. Here is our sample code.
                1. <body>    
                2.     <form id="form1" runat="server">    
                3.     <script>    
                4.         alert(fun);    
                5.         var fun = function () {    
                6.         }    
                7.     </script>    
                8.     </form>    
                9. </body> 
                  We are seeing that it's saying that the function "fun" is undefined.  In JavaScript, if the object is not yet created then it's undefined always.
                   
                  undefined Function
                   
                  Let's try to retrieve the function from the window object. Here is the sample code.
                  1. <body>    
                  2.     <form id="form1" runat="server">    
                  3.     <script>    
                  4.         alert(window.fun);    
                  5.         var fun = function () {    
                  6.         }    </script>    
                  7.     </form>    
                  8. </body>   
                    And, the output is here. It's undefined, in other words, it is still not created in the window object.
                     
                    function in JavaScript
                     

                    Conclusion

                     
                    In this article, we saw two different approaches to define functions in JavaScript. I hope you have understood the concept. In a future article, we will dig more into JavaScript. 


                    Similar Articles