Method overloading in Javascript

Background on method overloading

If you are from java or C# background then you must be familiar with the concept of method overloading. You can refer to following post on method overloading in java

Overloading and Overriding Methods in Java - How it works?

Just to summarize (as far as java is considered) two methods are said to be overloaded if they have same method name but different method signatures. Also note method signature is the name of the method plus the number and types of arguments. Signature has nothing to do with return type. Also two methods cannot have same signature.

So for example

public void foo(String arg1);

public void foo(String arg1, String arg2);

are overloaded methods. Also note method overloading is a compile time phenomenon. Which method is to be used for execution is decided at compile time depending on the method signature.

Okay enough of Java overloading background. Lets head to javascript.

Method overloading in Javascript

Method overloading is not possible in Javascript in strict sense!

yeah that's right. You should not do something like

function foo(x)
{
  //some logic 
}

function foo(x,y)
{
  //some logic 
}

Why have i written "should not" rather than "cannot" is because no body can stop you from writing the methods above. It's just that it will not serve it's intended purpose. Why not ?-

The issue is that JavaScript does NOT natively support method overloading. So, if it sees/parses two or more functions with a same names it’ll just consider the last defined function and overwrite the previous ones.

So  foo(x,y) wold override foo(x) in above case.  So if I call method as foo(1) and as per what I have written above foo(x,y) will overwrite foo(x) why is there no some kind of error or Exception ? 

Well because when you specify arguments in the round brackets - they are just like synthetic sugar coating on the real arguments. This is where there is another JavaScript feature, which a lot beginners miss out on. In any JavaScript method, the arguments passed into the method are accessible via an Object array with the name arguments.

So lets say you now have a method

function func1(a,b,c)
{

   //some logic 
} 

and you call func1(1,2,3,4) then a=1(arguments[0]), b=2(arguments[1]),c=3(arguments[2]) and you c(arguments[3]). So as I said arguments inside round brackets are just to improve the functionality.

In fact for above method you can also call it like func1(1,2) and in this case arguments c and d will be undefined. Following the same argument above you can have a function defined with no argument and call it with any number of arguments.

You can check any variable if it is undefined in the following way (using typeof ) -

function func1(a,b,c,d)
{
   if(typeof a == 'undefined')
   {
      alert("a is undefined"); 
    }
     // and so on... 
}

So how do we resolve this issue ?

One of the way I think is suitable for most of the case is follows -

Lets say you have method

function foo(x)
{

} 

Instead of overloading method which is not possible in javascript you can define a new method

fooNew(x,y,z)
{
}

and then modify the 1st function as follows -

function foo(x)
{
  if(arguments.length==2)
  {
     return fooNew(arguments[0],  arguments[1]);
  }
} 

If you have many such overloaded method consider using switch than just if-else statements.

Related Links

• Function overloading in Javascript - Best practices
• method overloading in Javascript 
• How to overload functions in javascript?