JavaScript Does NOT Support Method Overloading – That's True!!

A few weeks ago, I blogged about how “surprisingly” WCF Operation Contracts do not support Method overloading, due to the way the Web is designed.

It may come as a surprise to a lot of folks that even JavaScript does NOT support method overloading in the strictest sense.

For people from C# and Java background, who have just started coding in JavaScript, and are getting a hang of it, they may run into one particular issue while coding in JavaScript.

Problem

A common error/mistake almost everyone does (i.e. if the developer is keen enough to dive deep into JavaScript) is explained below.

The example has 2 JavaScript functions defined in a JS file as below. They have the same name, BUT different number of arguments (your typical method overloading).

function funcA(a,b) {
return a + b;
}

function funcA(c) {
return c;
}

Now, if we make the calls below, the outputs are as shown below:

funcA(2);  //Output is '2'

funcA(3,4); //Output is '3' (and NOT '7' !!)

So, WTH did just happen!!

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

In our case, the only function available is funcA(c). So even if we think we are making a call to funcA(a,b), it's actually calling funcA(c).

So, even when we make a call as funcA(3,4), why doesn’t it throw an exception if there are mismatching number of arguments??

This is where there is another JavaScript feature, which a lot of beginners miss out on. In any JavaScript method, the arguments passed into the method are accessible via an Object array with the name args[].

So in our case, even if we define a JavaScript method as funcA(), we can still make a call to it as:

funcA(2)
funcA(2,3)
funcA(2, "hello", 4, 5)

All of the above are valid and the parameters can be accessed by Index in the args[] array, available inside the method.

This is the reason JavaScript does not throw an exception; if you pass 2 parameters in a JavaScript function accepting only 1, it’ll just consider the first of the 2 parameters.

Solution

The easiest solution that can be applied here is that we have a parent function with the same name accepting any number of arguments. Inside this function, we inspect the incoming arguments (type, number, order, etc.) and call the appropriate child methods based on that (see below for a very simple and trivial example).

function funcA() {
if (arguments.length==1) {

return funcOne(arguments[0]);

}else if (arguments.length==2){

return funcTwo(arguments[0],  arguments[1]);

}}

function funcTwo(a,b) {
return a + b;
}

function funcOne(c) {
return c;
}

The solution suggested above may sound easy to implement, if you are dealing with basic types (integer, string, array) and are planning on overloading only a handful of functions. BUT, if your overloading requirements are complicated, you may have to put in a lot of effort and code.

There are a few efficient ways to overload in JavaScript out there, which I may discuss in a future post.

We may be used to comprehensive & extensive method overloading in common Object Oriented Languages like C# and Java, BUT JavaScript is different.

Although JavaScript can be said to be an Object Oriented language, BUT it's not a class based language as C# and Java. What it means is that apart from primitive data types like Number, String and Boolean, every other Type in JavaScript is simply of type Object.

So, even if we intend to somehow implement and use method overloading in JavaScript, it’ll be limited as compared to other OO languages.

If any of you have any suggestions on an ideal and reliable Overloading solution in JavaScript, you are welcome to provide them in the comments.