How to Overload Functions in JavaScript

Overload Functions in JavaScript are pretty much simple to write even though JavaScript doesn’t have overload functions concept. There are two ways to fake the overloading function concept in JavaScript.

1. Overload Functions using “arguments”
2. Wrap Function inside other Functions

1.Overload Functions using “arguments”

In most programming languages, sending extra parameters to a function throws an error but JavaScript is very kind, It doesn’t restrict us from sending extra arguments to a function. You can send as many parameters as you want even though the function declaration doesn’t have that many parameters.

How to access the extra parameters in JavaScript Functions?

The arguments object in rescue, By using arguments object we can access the extra parameters passed to the function. Every time a function invoked, the arguments object is available inside the function’s execution context.

How to use arguments inside JavaScript Functions?

The arguments object has the length property (arguments.length). But It doesn’t have any array methods such as push, pop etc.

The arguments.length property returns the total number of parameters passed into the function. If there’s no parameter, the value of arguments.length becomes 0.

Let’s dive into the real world example of fake overload function example:

function welcome(firstname,lastname) {
   if(arguments.length ==0) {
     console.log("Welcome");
   }
   if(arguments.length == 1) {
      console.log("Welcome " + firstname);
   }

   if(arguments.length == 2) {
      console.log("Welcome " + firstname + " " + lastname);
   }

   if(arguments.length == 3) {
      console.log("Welcome " + firstname + " " + lastname + ", " + arguments[2]);
   } 
}

The above welcome() function has two parameters firstname and lastname. The arguments.length property helps us to identify the number of parameters.

I had written several if statements to print the welcome message based on the number of parameters passed into the function.

Call Functions with different sets of Parameters

welcome();
welcome("Paul");
welcome("Paul","Walker");
welcome("Paul","Walker","I love racing");

//Output
"Welcome"
"Welcome Paul"
"Welcome Paul Walker"
"Welcome Paul Walker, I Love Racing"

When we invoke the function with different numbers of parameters, the output we get will also differ. For instance, Function without any parameters passes the first ‘if’ statement and prints the “Welcome” text.

This is the simplest method to fake function overloading concept in JavaScript.

2.Wrap Function inside Functions:

This method is pretty much similar to what we have done with the argument method. Instead of invoking the welcome() function directly,  Create different functions based on the parameters which in turn invokes the welcome() function.

function welcomeText() {
  welcome();
}

function welcomeName(firstname) {
  welcome(firstname);
}

function welcomeFullName(firstname,lastname) {
  welcome(firstname,lastname);
}

function welcomeMessage(firstname,lastname,message) {
  welcome(firstname,lastname,message);
}

welcomeText();
welcomeName("Paul");
welcomeFullName("Paul","Walker");
welcomeMessage("Paul","Walker","I love racing");

//Same Output
"Welcome"
"Welcome Paul"
"Welcome Paul Walker"
"Welcome Paul Walker, I Love Racing"

In a glance, you can understand what these functions do. In most popular JS Frameworks you could find similar code concepts, wrapping a function with different parameterized functions.

This concept conveys the story in an instant. For instance, when you see the function welcomeFullName(firstname,lastname), you quickly interpret that it prints the welcome message along with the full name.

Conclusion

The above-mentioned methods are used as an alternative to achieve the overload function concept in JavaScript. You can also send the last parameter of a function as Object or Array in order to deal with multiple unexpected parameters. I shared my point of view to achieve the solution for overload function concept in this post, If you know any better methods than this, share your method by making a comment below. Thanks!.