Post
Ask Question

Function Overloading In JavaScript

In most of the OOP languages like C#, we have a concept of function overloading, and we can achieve it with the same function name with different signatures and arguments.
 
But we don't have function signature in JavaScript. Let us take a look at what happens when we define two functions with the same name and different parameters.
  1. <script>  
  2. function Num(number){  
  3. document.write('You have passed '+number+"<br/>");  
  4. }  
  5. function Num(){  
  6. document.write("You haven't passed any arguments<br/>");  
  7. }  
  8. Num();//Calling function with no parameters  
  9. Num(1);//Calling function with one parameters  
  10. </script>  
Output
 
You haven't passed any arguments
 
In JavaScript, when you define multiple functions with the same name, the one that appears last will replace the earlier function declarations. This is called "function hosting". Now, let us take a look at using function objects,
  1. <script>    
  2.    var Num = new Function("number","document.write(\"You have passed <br/>\"+number)");    
  3.    Num = new Function("document.write(\"You haven't passed any arguments<br/>\")");    
  4.    Num();//Calling function with no parameters    
  5.    Num(1);//Calling function with one parameters    
  6. </script>   
    Output
     
     You haven't passed any argument
     
    As you can see, the function object is being assigned to Num two times, so the first function object will be replaced.
     
    We can achieve the overloading concepts with arguments object. This is different than other object oriented programming languages. We have defined only one function with no parameters but we are calling it with no parameters and more than one parameters. 
    1. <script>  
    2.     function sum() {  
    3.         var msg = 0;  
    4.         //function parameters are actually stored as an array-like structure called arguments.     
    5.         //The arguments object is automatically available inside any function    
    6.         //We can get the legth of arguments    
    7.         //if we don't pass any parameter, then below code executed arguments.lengh ==0    
    8.         if (arguments.length == 0) {  
    9.             msg = "You haven't passed any parameters<br/>";  
    10.             document.write(msg);  
    11.         }  
    12.         //if we pass single parameter, then the arguments length is 1    
    13.         else if (arguments.length == 1) {  
    14.             msg = "Please pass atleast two parameters<br/>";  
    15.             document.write(msg);  
    16.         } else {  
    17.             var result = 0;  
    18.             var len = arguments.length;  
    19.             //since arguments acts like an array, we can loop through it.    
    20.             for (i = 0; i < len; i++) {  
    21.                 result = result + arguments[i];  
    22.             }  
    23.             document.write(result + "<br/>");  
    24.         }  
    25.     }  
    26.     sum(); //Calling function with no parameters    
    27.     sum(1); //Calling function with one parameters    
    28.     sum(1, 8); //Calling function with two parameters    
    29.     sum(1, 2, 5, 6, 67, 8, 8); //Calling function with multiple parameters  
    Output
     
     You haven't passed any parameters
     
    Please pass at least two parameters
     
    9
     
    97